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

Cách tạo Slideshow sản phẩm nổi bật bằng Bootstrap

Trong bài thực hành hoc thiet ke web online này các Bạn sẽ được hướng dẫn cách tạo Slideshow sản phẩm nổi bật bằng Bootstrap

Bước 1: Tạo cấu trúc HTML cho các hình ảnh cần Slideshow

 
  
   
    
     
      
       
         
         
         Sản phẩm 1 
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
         200.000 đ Đặt mua
          
         
        
       
       
         
         
         Sản phẩm 2 
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
         200.000 đ Đặt mua
          
         
        
       
       
         
         
         Sản phẩm 3 
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
         200.000 đ Đặt mua

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

body {	
padding-top:0px;
}
#myCarousel .thumbnail {	
margin-bottom:0;
}
.carousel-control {	
color:#428BCA;	
top:44%;	
bottom:auto;	
opacity:1;
}
.carousel-control:hover {	
color:#d9534f;
}
.carousel-control.left, .carousel-control.right {	
background-image:none !important;
}
.carousel-control.right {	
left:auto;	
right:-25px;
}
.carousel-control.left {	
right:auto;	
left:-25px;
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

Bước 4: Gọi thư viện 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