OBin's Blog: tao slider trong bootstrap

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

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

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

Tạo nhanh một slider trong Bootstrap bằng cách sử dụng Bootstrap Carousel Plugin có sẵn.

Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Bước 1: Chép đoạn code bên dưới đặt vào vị trí slide bạn muốn đặt trong thẻ <body>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>


<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="">
      <div class="carousel-caption">
        <h3>Tiêu đề ảnh 1</h3>
        <p>Description ảnh 1</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="">
      <div class="carousel-caption">
        <h3>Tiêu đề ảnh 2</h3>
        <p>Description ảnh 2</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="">
      <div class="carousel-caption">
        <h3>Tiêu đề ảnh 3</h3>
        <p>Description ảnh 3</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="">
      <div class="carousel-caption">
        <h3>Tiêu đề ảnh 4</h3>
        <p>Description ảnh 4</p>
      </div>
    </div> </div>


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

Bước 2: Thay đổi đường dẫn hình ảnh, thông tin... ( phần được bôi đỏ trong đoạn code)

Chú ý: tại vị trí  mỗi dòng <li> tương ứng 1 với 1 ảnh, nếu bạn thêm ảnh thứ năm hay tạo thêm một dòng <li> mới với data-slide-to="4".
Tương tự, bạn phải thêm một ảnh mới dưới phần 

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)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- 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

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp