Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
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.

Trên trang này

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.

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 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-bs-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-bs-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-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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.

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

Thêm data-bs-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-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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-bs-touchthuộc tính. Ví dụ dưới đây cũng không bao gồm data-bs-ridethuộc tính và có data-bs-interval="false"vì vậy nó không tự động phát.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Biến thể tối

Thêm .carousel-darkvào các .carouselđiều khiển, chỉ báo và chú thích tối hơn. Các điều khiển đã được đảo ngược khỏi màu trắng mặc định với thuộc tính filterCSS. Phụ đề và điều khiển có các biến Sass bổ sung tùy chỉnh colorvà background-color.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Chuyển đổi tùy chỉnh

Thời lượng chuyển đổi của .carousel-itemcó thể được thay đổi bằng $carousel-transition-durationbiế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:).

Sass

Biến

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

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-bs-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-bs-slide-tođể chuyển một chỉ mục trang trình bày thô vào băng chuyền data-bs-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-bs-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-bs-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:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

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-bs-, như trong data-bs-interval="".

Tên Loại hình Mặc định Sự mô tả
interval 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.
keyboard boolean true Liệu băng chuyền có phản ứng với các sự kiện bàn phím hay không.
pause chuỗi | boolean 'hover'

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', vòng quay 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.
ride chuỗi | boolean false 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.
wrap boolean true Cho dù băng chuyền sẽ quay vòng liên tục hay có các điểm dừng khó.
touch boolean true 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 . Họ quay 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 .

Ví dụ: bạn có thể tạo một phiên bản băng chuyền với hàm tạo băng chuyền để khởi tạo với các tùy chọn bổ sung và bắt đầu quay vòng qua các mục:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
Phương pháp Sự mô tả
cycle Xoay qua các mục trong băng chuyền từ trái sang phải.
pause Ngăn băng chuyền di chuyển qua các mục.
prev Chuyển sang mục trước. Trả về người gọi trước khi mục trước đó được hiển thị (ví dụ: trước khi slid.bs.carouselsự kiện xảy ra).
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ị (ví dụ: trước khi slid.bs.carouselsự kiện xảy ra).
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ả lại cho người gọi trước khi mục đích được hiển thị
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ề người gọi trước khi mục đích được hiển thị (ví dụ: trước khi slid.bs.carouselsự kiện xảy ra).
dispose Hủy băng chuyền của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM)
getInstance Phương thức tĩnh cho phép bạn nhận được cá thể băng chuyền được liên kết với phần tử DOM, bạn có thể sử dụng nó như sau:bootstrap.Carousel.getInstance(element)
getOrCreateInstance Phương thức static trả về một phiên bản băng chuyền được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo. Bạn có thể sử dụng nó như thế này:bootstrap.Carousel.getOrCreateInstance(element)

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 Kích hoạt ngay lập tức khi slidephương thức thể hiện được gọi.
slid.bs.carousel Đượ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ó. 
var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})