Source

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 đó / 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.

Nhãn trang trình bày đầu tiên

Nulla vitae elit libero, một loài pharetra augue mollis interdum.

Nhãn trang trình bày thứ hai

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nhãn trang trình bày thứ ba

Praesent goodso cursus magna, vel scelerisque nisl consectetur.

<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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-item`Khoả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ế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 sai, băng chuyền sẽ không tự động xoay 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 `mouseenter`và 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.
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 "băng chuyền", hãy 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 . 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 .

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

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 `slide`phươ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:).