Bootstrap: Carousel carousel.js

Các ví dụ

Slideshow bên dưới sử dụng một plugin chung và thành phần tương ứng để quay vòng qua các phần tử trông giống như một carousel.

1.  
2.  
3.  
4.  
5.  

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Caption tùy chọn

Bạn có thể thêm caption vào slide của bạn một cách dễ dàng bằng cách đặt phần tử .carousel-caption vào bên trong một .item. Bạn hãy chèn bất kỳ mã HTML nào vào trong caption đó và nó sẽ được định dạng và căn chỉnh một cách tự động.

1.  
2.  
3.  
4.  
5.  

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Cách sử dụng

Nhiều carousel

Carousel yêu cầu việc sử dụng id trên container ngoài cùng (.carousel) đối với các carousel-control để có thể hoạt động tốt. Khi sử dụng nhiều carousel, hoặc khi thay đổi id của carousel, hãy nhớ cập nhật các control liên quan.

Thông qua các thuộc tính dữ liệu

Hãy sử dụng các thuộc tính dữ liệu để dễ dàng định vị vị trí của các carousel. data-slide nhận giá trị là prev hoặc next, có tác dụng thay đổi vị trí của slide một cách tương đối so với vị trí hiện tại. Ngoài ra, bạn hãy sử dụng data-slide-to để truyền chỉ số của một slide vào carousel data-slide-to="2", có tác dụng chuyển vị trí slide tới một vị trí có chỉ số cụ thể tính từ 0.

Thuộc tính data-ride="carousel" được sử dụng để đánh dấu một carousel bắt đầu chuyển động tại thời điểm trang được tải.

Thông qua JavaScript

Kích hoạt carousel bằng tay bằng cách sử dụng:

$('.carousel').carousel()

Các tùy chọn

Các tùy chọn có thể được truyền vào thông qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liêu, hãy thêm tên của tùy chọn vào sau data-, tương tự như data-interval="".

Các phương thức

.carousel(options)

Khởi tạo carousel với các tùy chọn tùy chỉnh object và bắt đầu chuyển động qua các slide.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Chuyển động quay vòng qua các slide của carousel.

.carousel('pause')

Tạm dừng chuyển động của carousel.

.carousel(number)

Dịch chuyển carousel tới một vị trí cụ thể (đánh số từ 0, tương tự như mảng).

.carousel('prev')

Dịch chuyển carousel về slide trước đó.

.carousel('next')

Dịch chuyển carousel sang slide tiếp theo.

Các sự kiện

Các class carousel của Bootstrap hỗ trợ 2 sự kiện cho phép can thiệp vào tính năng của carousel.

Cả 2 sự kiện đều gồm các thuộc tính sau:

• direction: Hướng chuyển động của carousel (có thể là "left" hoặc "right").
• relatedTarget: Phần tử DOM sẽ được chuyển động tới.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})