Plugin băng chuyền Bootstrap
Plugin băng chuyền
Plugin Carousel là một thành phần để duyệt qua các phần tử, giống như băng chuyền (trình chiếu).
Mẹo: Các plugin có thể được đưa vào riêng lẻ (sử dụng tệp "carousel.js" riêng lẻ của Bootstrap) hoặc tất cả cùng một lúc (sử dụng "bootstrap.js" hoặc "bootstrap.min.js").
Ví dụ về băng chuyền
Lưu ý: Băng chuyền không được hỗ trợ đúng cách trong Internet Explorer 9 trở về trước (vì chúng sử dụng chuyển tiếp và hoạt ảnh CSS3 để đạt được hiệu ứng trang chiếu).
Cách tạo băng chuyền
Ví dụ sau đây cho thấy cách tạo băng chuyền cơ bản:
Ví dụ
<div id="myCarousel" class="carousel slide" data-ride="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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los
Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New
York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Hãy tự mình thử »Ví dụ giải thích
<div> ngoài cùng:
Băng chuyền yêu cầu sử dụng id (trong trường hợp này id="myCarousel" ) để điều khiển băng chuyền hoạt động bình thường.
class="carousel" chỉ định rằng <div> này chứa băng chuyền.
Lớp .slide thêm hiệu ứng chuyển tiếp và hoạt ảnh CSS, giúp các mục trượt khi hiển thị một mục mới. Bỏ qua lớp này nếu bạn không muốn hiệu ứng này.
Thuộc tính data-ride="carousel" yêu cầu Bootstrap bắt đầu tạo hoạt ảnh cho băng chuyền ngay khi tải trang.
Phần “Chỉ báo”:
Các chỉ báo là các chấm nhỏ ở cuối mỗi trang trình bày (cho biết có bao nhiêu trang trình bày trong băng chuyền và người dùng hiện đang xem trang trình bày nào).
Các chỉ báo được chỉ định trong danh sách có thứ tự với lớp .carousel-indicators .
Thuộc tính data-target trỏ đến id của băng chuyền.
Thuộc tính data-slide-to chỉ định slide nào sẽ đi tới khi nhấp vào dấu chấm cụ thể.
Phần "Trình bao bọc cho slide":
Các trang trình bày được chỉ định trong <div> với lớp .carousel-inner .
Nội dung của mỗi slide được xác định trong <div> với lớp .item . Đây có thể là văn bản hoặc hình ảnh.
Lớp .active cần được thêm vào một trong các slide. Nếu không, băng chuyền sẽ không hiển thị.
Phần "Điều khiển trái và phải":
Mã này thêm các nút "trái" và "phải" cho phép người dùng qua lại giữa các slide theo cách thủ công.
Thuộc tính data-slide chấp nhận từ khóa "prev" hoặc "next" , làm thay đổi vị trí slide so với vị trí hiện tại của nó.
Thêm chú thích vào slide
Thêm <div class="carousel-caption"> trong mỗi <div class="item"> để tạo chú thích cho mỗi slide:
Ví dụ
<div id="myCarousel" class="carousel slide" data-ride="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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Chania">
<div
class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is
always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you,
Chicago!</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the
Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Hãy tự mình thử »Tham khảo băng chuyền Bootstrap hoàn chỉnh
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện băng chuyền, hãy truy cập Tài liệu tham khảo băng chuyền Bootstrap JS của chúng tôi.
