Tất cả bài viết  |  Bootstrap

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Hướng dẫn cách tạo Bootstrap Vertical Slide

Trong bài tự học lập trình web này các Bạn sẽ được Hướng dẫn cách tạo Bootstrap Vertical Slide cho website

Bước 1: Tạo cấu trúc HTML
 
 

Cách tạo Bootstrap Vertical Slide

Bước 2: Tạo cấu trúc CSS
 html, body{    
width:100%;    
height:100%;    
background-color:#fff;	
font-family: 'Sansita', sans-serif;    
}

.carousel-inner,.carousel,.item,.container,.fill {  
height:100%;  
width:100%;  
background-position:center center;  
background-size:cover;
}

.slide-wrapper{
display:inline;
}

.slide-wrapper .container{padding:0px;}

.carousel-inner> .item.next ,  
.carousel-inner > .item.active.right{ 
transform: translate3d(0, 100%, 0); 
-webkit-transform: translate3d(0, 100%, 0); 
-ms-transform: translate3d(0, 100%, 0); 
-moz-transform: translate3d(0, 100%, 0); 
-o-transform: translate3d(0, 100%, 0);  
top: 0;
}
.carousel-inner > .item.prev ,.carousel-inner > .item.active.left{ 
transform: translate3d(0,-100%, 0); 
-webkit-transform: translate3d(0,-100%, 0);  
-moz-transform: translate3d(0,-100%, 0);
-ms-transform: translate3d(0,-100%, 0); 
-o-transform: translate3d(0,-100%, 0); 
top: 0;
}

.carousel-inner > .item.next.left , .carousel-inner > .item.prev.right , .carousel-inner > .item.active{
transform:translate3d(0,0,0); 
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);; 
-moz-transform:translate3d(0,0,0); 
-o-transform:translate3d(0,0,0); 
top:0;
}


.carousel-indicators{
position:absolute;
top:0;
bottom:0;
margin:auto;
height:20px;
right:10px; 
left:auto;
width:auto;
}

.carousel-indicators li{
display:block; 
margin-bottom:5px; 
border:1px solid #00a199; 
}

.carousel-indicators li.active{
margin-bottom:5px; 
background:#00a199;
}


.animated{	
animation-duration:3s;	
-webkit-animation-duration:3s;	
-moz-animation-duration:3s;	
-ms-animation-duration:3s;	
-o-animation-duration:3s;	
visibility:visible;	
opacity:1;	
transition:all 0.3s ease;
}

.carousel-img{   	 
display: inline-block;   
margin: 0 auto;    
width: 100%;    
text-align: center;	
}

.item img{
margin:auto;
visibility:hidden; 
opacity:0; 
transition:all 0.3s ease;
}

.item1 .carousel-img img , .item1.active .carousel-img img{
max-height:300px;
}

.item1.active .carousel-img img.animated{
visibility:visible; 
opacity:1; 
transition:all 1s ease; 
animation-duration:2s; 
animation-delay:0.3s
}

.item .carousel-desc{
color:#fff; 
text-align:center;
}

.item  h2{
font-size:50px; 
animation-delay:1.5s;
animation-duration:1s; 
}

.item  p{
animation-delay:2.5s;
animation-duration:1s; 
width:50%; 
margin:auto;
}


.item2 .carousel-img img , .item2.active .carousel-img img{
max-height:300px;
}

.item2.active .carousel-img img.animated{
visibility:visible; 
opacity:1; 
transition:all 0.3s ease; 
animation-duration:3s; 
animation-delay:0.3s
}

.item2 h2 , item2.active h2{
visibility:hidden; 
opacity:0; 
transition:all 5s ease;
}

.item2.active h2.animated{
visibility:visible; 
opacity:1;  
animation-delay:3s;
}


.item .fill{
padding:0px 30px; 
display:table; 
}

.item .inner-content{
display: table-cell;
vertical-align: middle;
}

.item3 .col-md-6{
float:none; 
display:inline-block; 
vertical-align:middle; 
width:49%;
}


.item3.active .carousel-img img.animated{
visibility:visible; 
opacity:1; 
transition:all 0.3s ease; 
animation-duration:2s; 
animation-delay:0.3s
}

.item3 h2 , item3.active h2{
visibility:hidden; 
opacity:0; 
transition:all 5s ease; 
}

.item.item3 .carousel-desc{
text-align:left;
}

.item3.active h2.animated{
visibility:visible; 
opacity:1;  
animation-delay:1.5s
}

.item3 p , item3.active p{
visibility:hidden; 
opacity:0; 
transition:all 5s ease; 
width:100%;  
}

.item3.active p.animated{
visibility:visible; 
opacity:1;  
animation-delay:2.5s;
}


@media(max-width:991px){	
.item .carousel-desc , .item.item3 .carousel-desc{
text-align:center;
}	

.item .carousel-desc p {
width:80%;
}	

.item3 .col-md-6{
width:100%; 
text-align:center;
}
}

@media(max-width:768px){
.item .carousel-img img, .item.active .carousel-img img{
max-height:155px;
}

.item  h2{
font-size:30px; 
margin-top:0px;
}

.item .carousel-desc p{
width:100%; 
font-size:12px;
}
}

@media(max-width:480px){
.item  h2{font-size:30px;
}

.item .carousel-desc p{width:100%;
}
} 
Bước 3: Gọi thư viện Bootstrap và Font awesome
 
 
  
Bước 4: Gọi thư viện JQUERY
 
Bước 5: Tạo hiệu ứng Slide bằng JQUERY
$(document).ready(function(){    
$('#myCarousel').carousel({      
interval:6000    
});


$('#myCarousel').bind('mousewheel DOMMouseScroll', function(e){
        
if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {            
$(this).carousel('prev');        
}        
else{            
$(this).carousel('next');			        
}    
});
 	

$("#myCarousel").on("touchstart", function(event){         
var yClick = event.originalEvent.touches[0].pageY;    	
$(this).one("touchmove", function(event){
        
var yMove = event.originalEvent.touches[0].pageY;        
if( Math.floor(yClick - yMove) > 1 ){            
$(".carousel").carousel('next');        
}        
else if( Math.floor(yClick - yMove) < -1 ){            
$(".carousel").carousel('prev');        
}    
});    

$(".carousel").on("touchend", function(){            
$(this).off("touchmove");    
});
});    
});


$(document).ready(function(){
$(function(){	
	$.fn.extend({			animateCss: function (animationName) {	
			var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';				this.addClass('animated ' + animationName).one(animationEnd, function() {	
				$(this).removeClass(animationName);	
			});	
		}	
	});			 

$('.item1.active img').animateCss('slideInDown');			 
$('.item1.active h2').animateCss('zoomIn');			 
$('.item1.active p').animateCss('fadeIn');			 
});
     

$("#myCarousel").on('slide.bs.carousel', function () {	
	$.fn.extend({			animateCss: function (animationName) {	
			var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';				this.addClass('animated ' + animationName).one(animationEnd, function() {	
				$(this).removeClass(animationName);	
			});	
		}	
	});	

		$('.item1 img').animateCss('slideInDown');	
	$('.item1 h2').animateCss('zoomIn');	
	$('.item1 p').animateCss('fadeIn');	
			$('.item2 img').animateCss('pulse');	
	$('.item2 h2').animateCss('flash');	
	$('.item2 p').animateCss('fadeIn');	
			$('.item3 img').animateCss('fadeInLeft');	
	$('.item3 h2').animateCss('fadeInDown');	
	$('.item3 p').animateCss('fadeIn');    
});
}); 
Xem  demo Tải Code Chat với hocwebgiare.com
Bạn có thể quan tâm

Hướng dẫn cách tùy biến màu Bootstrap Tooltip Học lập trình web

Hướng dẫn cách tạo Accordion hướng bên phải bằng Bootstrap Học lập trình web

Hướng dẫn tạo Tab menu đổi màu bằng Bootstrap Học lập trình web

Hướng dẫn cách tạo menu Responsive với Bootsnav Học lập trình web

Hướng dẫn cách tạo Flexible Bootstrap Carousel Học lập trình web

Hướng dẫn cách tạo Box Icon bằng Bootstrap Học lập trình web

Hướng dẫn cách tạo Bootstrap ResCarousel Học lập trình web

Hướng dẫn thiết kế bộ lọc sản phẩm bằng Bootstrap Học lập trình web

Hướng dẫn cách tạo VIP card bằng Bootstrap Học lập trình web

Hướng dẫn cách tạo Bootstrap Panel Fullscreen Toggle Học lập trình web