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

by 3:32:00 PM 0 nhận xét
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">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <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>

  <!-- Left and right controls -->
  <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í <!-- Indicators --> 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 <!-- Wrapper for slides -->

 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

Thảo luận

0 nhận xét:

Post a Comment