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

Hướng dẫn cách tạo Responsive Carousel bằng Bootstrap

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo Responsive Carousel bằng Bootstrap

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

 
  
   
    
    SẢN PHẨM MỚI 
    
  
 
 
   
    
     
     
       
         
        SẢN PHẨM 1 
        200.000 VNĐ 
        
      
       
         
        SẢN PHẨM 2 
        300.000 VNĐ 
        
      
       
         10% 
        SẢN PHẨM 3 
        400.000 VNĐ 
        500.000 VNĐ 
        
      
       
         
        SẢN PHẨM 4 
        300.000 VNĐ 
        
      
       
         
        SẢN PHẨM 5 
        400.000 VND 
        
      
       
         
        SẢN PHẨM 6 
        200.000 VNĐ

Bước 2: Định dạng CSS

#slider-text{  
padding-top: 10px;  
display: block;
}

#slider-text .col-md-6{  
overflow: hidden;
}


#slider-text h2 {  
font-family: 'Josefin Sans', sans-serif;  
font-weight: 400;  
font-size: 30px;  
letter-spacing: 3px; 
 margin: 30px auto;  
padding-left: 40px;
}

#slider-text h2::after{  
border-top: 2px solid #c7c7c7;  
content: "";  
position: absolute;  
bottom: 35px;  
width: 100%;  
}


#itemslider h4{  
font-family: 'Josefin Sans', sans-serif;  
font-weight: 400;  
font-size: 12px;  
margin: 10px auto 3px;
}

#itemslider h5{  
font-family: 'Josefin Sans', sans-serif;  
font-weight: bold;  
font-size: 12px;  
margin: 3px auto 2px;
}

#itemslider h6{  
font-family: 'Josefin Sans', sans-serif;  
font-weight: 300; 
font-size: 10px;  
margin: 2px auto 5px;
}

.badge {  
background: #b20c0c;  
position: absolute;  
height: 40px;  
width: 40px;  
border-radius: 50%;  
line-height: 31px;  
font-family: 'Josefin Sans', sans-serif;  
font-weight: 300;  
font-size: 14px;  
border: 2px solid #FFF;  
box-shadow: 0 0 0 1px #b20c0c;  
top: 5px;  right: 25%;
}

#slider-control img{  
padding-top: 60%;  
margin: 0 auto;
}

@media screen and (max-width: 992px){

#slider-control img {  
padding-top: 70px;  
margin: 0 auto;
}
}


.carousel-showmanymoveone .carousel-control { 
 width: 4%;  
background-image: none;
}

.carousel-showmanymoveone .carousel-control.left {  
margin-left: 5px;
}

.carousel-showmanymoveone .carousel-control.right {  
margin-right: 5px;
}

.carousel-showmanymoveone .cloneditem-1,.carousel-showmanymoveone .cloneditem-2,.carousel-showmanymoveone .cloneditem-3,.carousel-showmanymoveone .cloneditem-4,.carousel-showmanymoveone .cloneditem-5 {  
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: -16.666%;  
}  

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

.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,  .carousel-showmanymoveone .carousel-inner .cloneditem-4,  .carousel-showmanymoveone .carousel-inner .cloneditem-5,  .carousel-showmanymoveone .carousel-inner .cloneditem-6  {    
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(16.666%, 0, 0);    
transform: translate3d(16.666%, 0, 0);    
left: 0;  
}  

.carousel-showmanymoveone .carousel-inner > .item.active.left,  .carousel-showmanymoveone .carousel-inner > .item.prev {    
-webkit-transform: translate3d(-16.666%, 0, 0);    
transform: translate3d(-16.666%, 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;  
}
}

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

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