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

Cách tạo Background Slideshow cho Website bằng Bootstrap

Trong bài thực hành học lập trình web online này các Bạn sẽ được hướng dẫn cách tạo Background Slideshow cho Website bằng Bootstrap

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

 
  
   
    
     
     
     
    
  
 
  
   
    
    Cách tạo Background Slideshow cho Website bằng Bootstrap 
    
    
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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

html, body {	
height:100%;	
width:100%;	
position:relative;
}

#background-carousel {	
position:fixed;	
width:100%;	
height:100%;	
z-index:-1;
}
.carousel, .carousel-inner {	
width:100%;	
height:100%;	
z-index:0;	
overflow:hidden;
}
.item {	
width:100%;	
height:100%;	
background-position:center center;	
background-size:cover;	
z-index:0;
}

#content-wrapper {	
position:absolute;	
z-index:1 !important;	
min-width:100%;	
min-height:100%;
}
h1 {color:#F00}

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 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