in English

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.).

Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy vấn phương tiện. Xem phần chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .

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 / sau, 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 duy nhất idtrê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ó data-targetthuộc tính (hoặc hrefcho các liên kết) khớp với thuộc tính idcủ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. Chúng tôi khuyên bạn nên sử dụng <button>các phần tử, nhưng bạn cũng có thể sử dụng <a>các phần tử với role="button".

<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>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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 id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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. Tùy thuộc vào nội dung băng chuyền của bạn (ví dụ: các trang trình bày chỉ văn bản), bạn có thể muốn thêm .bg-bodyhoặc một số CSS tùy chỉnh vào các .carousel-items để phân bổ thích hợp.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Tắt thao tác vuốt chạm

Băng chuyền hỗ trợ vuốt sang trái / phải trên các thiết bị màn hình cảm ứng để di chuyển giữa các trang trình bày. Điều này có thể bị vô hiệu hóa bằng cách sử dụng data-touchthuộc tính. Ví dụ dưới đây cũng không bao gồm data-ridethuộc tính và có data-interval="false"vì vậy nó không tự động phát.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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ếu bạn không sử dụng data-ride="carousel"để khởi tạo băng chuyền của mình, bạn phải tự khởi tạo nó. 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="".

Tên Loại hình Mặc định Sự mô tả
khoảng thời gian con số 5000 Khoảng thời gian để trì hoãn giữa việc tự động quay một mục. Nếu false, băng chuyền sẽ không tự động quay vòng.
bàn phím boolean thật Liệu băng chuyền có phản ứng với các sự kiện bàn phím hay không.
tạm ngừng chuỗi | boolean 'bay lượn'

Nếu được đặt thành 'hover', hãy tạm dừng quay băng chuyền mouseentervà tiếp tục quay băng chuyền mouseleave. Nếu được đặt thành false, di chuột qua băng chuyền sẽ không tạm dừng.

Trên các thiết bị hỗ trợ cảm ứng, khi được đặt thành 'hover', chạy xe đạp sẽ tạm dừng touchend(sau khi người dùng hoàn thành tương tác với băng chuyền) trong hai khoảng thời gian, trước khi tự động tiếp tục. Lưu ý rằng điều này là ngoài hành vi của chuột ở trên.
dap xe sợi dây sai Tự động phát băng chuyền sau khi người dùng xoay vòng mục đầu tiên theo cách thủ công. Nếu được đặt thành 'carousel', tự động phát băng chuyền khi tải.
bọc boolean thật Cho dù băng chuyền sẽ quay vòng liên tục hay có các điểm dừng khó.
chạm boolean thật Liệu băng chuyền có hỗ trợ tương tác vuốt trái / phải trên các thiết bị màn hình cảm ứng hay không.

Phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Chúng trở lại người gọi ngay sau khi quá trình chuy��n đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .

.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 đi qua các mặt hàng.

.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ề cho 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ử.

.carousel('nextWhenVisible')

Không xoay vòng băng chuyền sang trang tiếp theo khi trang không hiển thị hoặc băng chuyền hoặc trang cha của nó không hiển thị. 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('to')

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ề 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).

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">).

Loại sự kiện Sự mô tả
slide.bs.carousel Sự kiện này kích hoạt ngay lập tức khi slidephương thức thể hiện được gọi.
slid.bs.carousel Sự kiện này được kích hoạt khi băng chuyền đã hoàn thành quá trình chuyển đổi trang chiếu của nó. 
$('#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:).