Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out

by Unknown 9:35:00 AM 0 nhận xét

Bootstrap Framework chắc hẳn đã quen thuộc với nhiều người làm web, silder cũng là phần không thể thiếu trong một website. Bootstrap hỗ trợ slider mặc định sử dụng hiệu ứng trượt ngang, nhưng để đổi hiệu ứng này sang Fade in - Fade out thì phải làm như thế nào? Sau đây mời các bạn tham khảo biết viết dưới để xử lý vấn đề này nhé!

1  Tạo slider đặt tại vị trí bạn muốn trên website, code slider của Bootstrap như sau:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>

 2 Tại cuối file css của website bạn thêm đoạn css cho hiệu ứng fade như sau:

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

Lưu ý: Mặc định code html slider Bootstrap tại thẻ <div id="carousel" không có class "carousel-fade" , ta thêm class này để slider nhận hiệu ứng từ css bạn đã thêm ở bước sau.

Các bạn có thể download file demo ở đây

Chúc các bạn thành công!


Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Tạo menu dropdowns nhanh trong Bootstrap  
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin