Băng chuyền

Một thành phần trình chiếu để xoay vòng qua các phần tử — hình ảnh hoặc trang trình bày văn bản — giống như một băng chuyền.

Làm thế nào nó hoạt động

Băng chuyền là một trình chiếu để chuyển đổi qua một loạt nội dung, được xây dựng bằng các chuyển đổi CSS 3D và một chút JavaScript. Nó hoạt động với một loạt hình ảnh, văn bản hoặc đánh dấu tùy chỉnh. Nó cũng bao gồm hỗ trợ cho các điều khiển và chỉ báo trước đó / tiếp theo.

Trong các trình duyệt có hỗ trợ API khả năng hiển thị trang , băng chuyền sẽ tránh trượt khi trang web không hiển thị với người dùng (chẳng hạn như khi tab trình duyệt không hoạt động, cửa sổ trình duyệt được thu nhỏ, v.v.).

Xin lưu ý rằng các băng chuyền lồng nhau không được hỗ trợ và các băng chuyền nói chung không tuân thủ các tiêu chuẩn trợ năng.

Cuối cùng, nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, thì nó yêu cầuutil.js .

Thí dụ

Băng chuyền không tự động chuẩn hóa kích thước trang chiếu. Do đó, bạn có thể cần sử dụng các tiện ích bổ sung hoặc các kiểu tùy chỉnh để kích thước nội dung một cách thích hợp. Mặc dù băng chuyền hỗ trợ các điều khiển và chỉ báo trước đó / tiếp theo, nhưng chúng không bắt buộc một cách rõ ràng. Thêm và tùy chỉnh khi bạn thấy phù hợp.

Lớp .activecần được thêm vào một trong các trang chiếu nếu không băng chuyền sẽ không hiển thị. Ngoài ra, hãy đảm bảo đặt một id duy nhất trên các .carouselđiều khiển tùy chọn, đặc biệt nếu bạn đang sử dụng nhiều băng chuyền trên một trang. Các phần tử điều khiển và chỉ báo phải có một data-targetthuộc tính (hoặc hrefcho các liên kết) khớp với id của .carouselphần tử.

Chỉ trang trình bày

Đây là một băng chuyền chỉ có các trang trình bày. Lưu ý sự hiện diện của hình ảnh băng chuyền .d-blockvà .w-100trên băng chuyền để ngăn việc căn chỉnh hình ảnh mặc định của trình duyệt.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Có điều khiển

Thêm vào các điều khiển trước đó và tiếp theo:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Với các chỉ số

Bạn cũng có thể thêm các chỉ số vào băng chuyền, cùng với các điều khiển.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Có chú thích

Thêm chú thích vào trang trình bày của bạn một cách dễ dàng với .carousel-captionphần tử bên trong bất kỳ .carousel-item. Chúng có thể dễ dàng ẩn trên các khung nhìn nhỏ hơn, như hình dưới đây, với các tiện ích hiển thị tùy chọn . Chúng tôi ẩn chúng ban đầu với .d-nonevà đưa chúng trở lại trên các thiết bị cỡ trung bình với .d-md-block.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

Thêm .carousel-fadevào băng chuyền của bạn để tạo hiệu ứng cho các trang trình bày với hiệu ứng chuyển đổi mờ dần thay vì một trang chiếu.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

.carousel-itemKhoảng thời gian cá nhân

Thêm data-interval=""vào a .carousel-itemđể thay đổi khoảng thời gian trì hoãn từ khi tự động chuyển sang mục tiếp theo.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Cách sử dụng

Qua các thuộc tính dữ liệu

Sử dụng các thuộc tính dữ liệu để dễ dàng kiểm soát vị trí của băng chuyền. data-slidechấp nhận các từ khóa prevhoặc nextthay đổi vị trí trang chiếu so với vị trí hiện tại của nó. Ngoài ra, sử dụng data-slide-tođể chuyển một chỉ mục trang trình bày thô vào băng chuyền data-slide-to="2", chuyển vị trí trang trình bày đến một chỉ mục cụ thể bắt đầu bằng 0.

Thuộc data-ride="carousel"tính được sử dụng để đánh dấu một băng chuyền là hoạt ảnh bắt đầu khi tải trang. Nó không thể được sử dụng kết hợp với khởi tạo JavaScript rõ ràng (thừa và không cần thiết) của cùng một băng chuyền.

Qua JavaScript

Gọi băng chuyền theo cách thủ công với:

$('.carousel').carousel()

Tùy chọn

Các tùy chọn có thể được chuyển 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 nối tên tùy chọn vào data-, như trong data-interval="".

Phương pháp

.carousel(options)

Khởi tạo băng chuyền với một tùy chọn tùy chọn objectvà bắt đầu quay vòng qua các mục.

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

.carousel('cycle')

Xoay qua các mục trong băng chuyền từ trái sang phải.

.carousel('pause')

Ngăn băng chuyền di chuyển qua các mục.

.carousel(number)

Xoay băng chuyền thành một khung cụ thể (dựa trên 0, tương tự như một mảng). Trả về người gọi trước khi mục đích được hiển thị (tức là trước khi slid.bs.carouselsự kiện xảy ra).

.carousel('prev')

Chuyển sang mục trước. Trả về cho người gọi trước khi mục trước đó được hiển thị (tức là trước khi slid.bs.carouselsự kiện xảy ra).

.carousel('next')

Chuyển sang mục tiếp theo. Trả về cho người gọi trước khi mục tiếp theo được hiển thị (tức là trước khi slid.bs.carouselsự kiện xảy ra).

.carousel('dispose')

Hủy băng chuyền của một phần tử.

Sự kiện

Lớp băng chuyền của Bootstrap cho thấy hai sự kiện để kết nối vào chức năng băng chuyền. Cả hai sự kiện đều có các thuộc tính bổ sung sau:

• direction: Hướng băng chuyền đang trượt (một trong hai "left"hoặc "right").
• relatedTarget: Phần tử DOM đang được trượt vào vị trí như một mục đang hoạt động.
• from: Chỉ mục của mục hiện tại
• to: Chỉ mục của mục tiếp theo

Tất cả các sự kiện băng chuyền được kích hoạt tại chính băng chuyền (tức là tại <div class="carousel">).

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

Thay đổi thời lượng chuyển đổi

Thời lượng chuyển đổi của .carousel-itemcó thể được thay đổi bằng $carousel-transitionbiến Sass trước khi biên dịch hoặc các kiểu tùy chỉnh nếu bạn đang sử dụng CSS đã biên dịch. Nếu nhiều chuyển đổi được áp dụng, hãy đảm bảo rằng quá trình chuyển đổi được xác định trước (ví dụ transition: transform 2s ease, opacity .5s ease-out:).