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

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 
  
   
    
     
      
      
      
     
     
      
       
        
          
         
        
         Modern Designer Sofa 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elit ipsum, scelerisque non semper eu, aliquet vel odio. 
         
        
       
      
      
       
        
          
         
        
         Vintage Style Sofa 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elit ipsum, scelerisque non semper eu, aliquet vel odio. 
         
        
       
      
      
       
        
        
           
          
        
         
         
          Stylish Sofa 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elit ipsum, scelerisque non semper eu, aliquet vel odio.

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 Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất