Bootstrap - Plugin băng chuyền

Băng chuyền Bootstrap là một cách linh hoạt, đáp ứng để thêm thanh trượt vào trang web của bạn. Ngoài khả năng đáp ứng, nội dung còn đủ linh hoạt để cho phép hình ảnh, khung nội tuyến, video hoặc bất kỳ loại nội dung nào bạn có thể muốn.

Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần carousel.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể bao gồm các bootstrap.js hoặc minified bootstrap.min.js .

Thí dụ

Trình chiếu đơn giản bên dưới hiển thị một thành phần chung để xoay vòng qua các phần tử như băng chuyền, bằng cách sử dụng plugin băng chuyền Bootstrap. Để triển khai băng chuyền, bạn chỉ cần thêm mã có đánh dấu. Không cần thuộc tính dữ liệu, chỉ cần phát triển dựa trên lớp đơn giản.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

Phụ đề tùy chọn

Bạn có thể thêm chú thích vào trang trình bày của mình một cách dễ dàng với .carousel-caption phần tử trong bất kỳ .item. Chỉ đặt khoảng bất kỳ HTML tùy chọn nào trong đó và nó sẽ được căn chỉnh và định dạng tự động. Ví dụ sau đây chứng minh điều này -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

Sử dụng

Via data attributes - 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.
- Thuộc tính data-slidechấp nhận các từ khóa trước hoặc tiếp theo , điều này làm thay đổi vị trí trang chiếu so với vị trí hiện tại của nó.
- 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 chiếu sang một chỉ mục cụ thể bắt đầu bằng 0.
- Các data-ride = "carousel" thuộc tính được sử dụng để đánh dấu băng chuyền là hoạt ảnh bắt đầu khi tải trang.
Via JavaScript - Băng chuyền có thể được gọi theo cách thủ công bằng JavaScript như bên dưới -

$('.carousel').carousel()

Tùy chọn

Có một số tùy chọn nhất định có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript được liệt kê trong bảng sau:

Tên tùy chọn	Loại / Giá trị mặc định	Tên thuộc tính dữ liệu	Sự miêu tả
khoảng thời gian	số Mặc định - 5000	khoảng thời gian dữ liệu	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.
tạm ngừng	string Mặc định - "hover"	tạm dừng dữ liệu	Tạm dừng vòng quay của băng chuyền trên mouseenter và tiếp tục quay vòng của băng chuyền trên mouseleave.
bọc lại	boolean Mặc định - true	bọc dữ liệu	Cho dù băng chuyền sẽ quay vòng liên tục hay có các điểm dừng khó.

Phương pháp

Dưới đây là danh sách các phương pháp hữu ích có thể được sử dụng với mã băng chuyền.

phương pháp	Sự miêu tả	Thí dụ
.carousel (tùy chọn)	Khởi tạo băng chuyền với một đối tượng tùy chọn tùy chọn và bắt đầu quay vòng qua các mục.	`$('#identifier').carousel({ interval: 2000 })`
.carousel ('chu kỳ')	Xoay qua các mục băng chuyền từ trái sang phải.	`$('#identifier').carousel('cycle')`
.carousel ('tạm dừng')	Ngăn băng chuyền di chuyển qua các mục.	`$('#identifier')..carousel('pause')`
.carousel (số)	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).	`$('#identifier').carousel(number)`
.carousel ('trước')	Chuyển sang mục trước.	`$('#identifier').carousel('prev')`
.carousel ('tiếp theo')	Chuyển sang mục tiếp theo.	`$('#identifier').carousel('next')`

Thí dụ

Ví dụ sau minh họa việc sử dụng các phương thức:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">            
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>
	
</div> 

<script>
   $(function() {
	
      // Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });
      
      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });
      
      // Cycles the carousel to a particular frame 
      $(".slide-one").click(function() {
         $("#myCarousel").carousel(0);
      });
      
      $(".slide-two").click(function() {
         $("#myCarousel").carousel(1);
      });
      
      $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

Sự kiện

Lớp băng chuyền của Bootstrap cho thấy hai sự kiện để nối vào chức năng băng chuyền được liệt kê trong bảng sau.

Biến cố	Sự miêu tả	Thí dụ
slide.bs.carousel	Sự kiện này kích hoạt ngay lập tức khi phương thức phiên bản slide được gọi.	`$('#identifier').on('slide.bs.carousel', function () { // do something })`
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ó.	`$('#identifier').on('slid.bs.carousel', function () { // do something })`

Thí dụ

Ví dụ sau minh họa việc sử dụng các sự kiện:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>