Băng chuyền bootstrap 4

Thẻ.

• Đáp ứng
• Băng chuyền đáp ứng
• Cách tạo Responsive Carousel
• Bootstrap
• jquery
• CSS3
• học web

Bootstrap    Xem [4596]   Học thiết kế web

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à Phông chữ tuyệt vời

Bước 4. Call library JQUERY

Bước 5. Tạo hiệu ứng Slide bằng JQUERY