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

Hướng dẫn tạo trang cuộn hình ảnh bằng Bootstrap

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn tạo trang cuộn hình ảnh bằng Bootstrap

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

 
  
  Hướng dẫn tạo trang cuộn hình ảnh bằng Bootstrap

Bước 2: Tạo giao diện Form bằng CSS

.carousel-showmanymoveone .carousel-control {  
width: 4%;  
background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {  
margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {  
margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,.carousel-showmanymoveone .cloneditem-2,.carousel-showmanymoveone .cloneditem-3 {  
display: none;
}

@media all and (min-width: 768px) {  
.carousel-showmanymoveone .carousel-inner > .active.left,  .carousel-showmanymoveone .carousel-inner > .prev {    
left: -50%;  
}  
.carousel-showmanymoveone .carousel-inner > .active.right,  .carousel-showmanymoveone .carousel-inner > .next {    
left: 50%;  
}  

.carousel-showmanymoveone .carousel-inner > .left,  .carousel-showmanymoveone .carousel-inner > .prev.right,  .carousel-showmanymoveone .carousel-inner > .active {    
left: 0;  
}  
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {    
display: block;  
}
}

@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {  
.carousel-showmanymoveone .carousel-inner > .item.active.right,  .carousel-showmanymoveone .carousel-inner > .item.next {    
-webkit-transform: translate3d(50%, 0, 0);            
transform: translate3d(50%, 0, 0);    
left: 0;  
}  

.carousel-showmanymoveone .carousel-inner > .item.active.left,  .carousel-showmanymoveone .carousel-inner > .item.prev {    
-webkit-transform: translate3d(-50%, 0, 0);            
transform: translate3d(-50%, 0, 0);    
left: 0;  
}  

.carousel-showmanymoveone .carousel-inner > .item.left,  .carousel-showmanymoveone .carousel-inner > .item.prev.right,  .carousel-showmanymoveone .carousel-inner > .item.active {    
-webkit-transform: translate3d(0, 0, 0);            
transform: translate3d(0, 0, 0);    
left: 0;  
}
}

@media all and (min-width: 992px) {  
.carousel-showmanymoveone .carousel-inner > .active.left,  .carousel-showmanymoveone .carousel-inner > .prev {    
left: -25%;  
}  

.carousel-showmanymoveone .carousel-inner > .active.right,  .carousel-showmanymoveone .carousel-inner > .next {    
left: 25%;  
}  

.carousel-showmanymoveone .carousel-inner > .left,  .carousel-showmanymoveone .carousel-inner > .prev.right,  .carousel-showmanymoveone .carousel-inner > .active {    
left: 0;  
}  

.carousel-showmanymoveone .carousel-inner .cloneditem-2,  .carousel-showmanymoveone .carousel-inner .cloneditem-3 {    
display: block;  
}
}

@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {  
.carousel-showmanymoveone .carousel-inner > .item.active.right,  .carousel-showmanymoveone .carousel-inner > .item.next {    
-webkit-transform: translate3d(25%, 0, 0);            
transform: translate3d(25%, 0, 0);    
left: 0;  
}  
.carousel-showmanymoveone .carousel-inner > .item.active.left,  .carousel-showmanymoveone .carousel-inner > .item.prev {    
-webkit-transform: translate3d(-25%, 0, 0);            
transform: translate3d(-25%, 0, 0);    
left: 0;  
}  
.carousel-showmanymoveone .carousel-inner > .item.left,  .carousel-showmanymoveone .carousel-inner > .item.prev.right,  .carousel-showmanymoveone .carousel-inner> .item.active {    
-webkit-transform: translate3d(0, 0, 0);            
transform: translate3d(0, 0, 0);    
left: 0;  
}
}

.container {  
margin-bottom: 10px;
}


@media only screen and (min-width: 768px) {  
.logo {    
margin: 28px;    
float: left;  
}
}

.title {  padding: 28px;  
display: table-cell;  
position: relative;  
vertical-align: middle;  
text-align: center;

}

Bước 3: Gọi thư viện Bootstrap

Bước 4: Gọi thư viện JQUERY

Bước 5: Tạo hiệu ứng cuộn bằng JQUERY

(function(){  
$('#carousel_number').carousel({ 
interval: 2000 
});  

$('#carousel_alphabe').carousel({ 
interval: 3600 
});
}());


(function(){  $('.carousel-showmanymoveone .item').each(function(){    
var itemToClone = $(this);
    
for (var i=1;i<4;i++) {      

itemToClone = itemToClone.next();
      
if (!itemToClone.length) {        
itemToClone = $(this).siblings(':first');      
}
      

itemToClone.children(':first-child').clone()        
.addClass("cloneditem-"+(i))        
.appendTo($(this));    
}  
});
}());

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