Bootstrap carousel plugin
Carousel plugin
Plugin Carousel là một thành phần để duyệt xoay vòng qua các phần tử, giống như một slide trình chiếu.
Ví dụ về Slide trình chiếu
Cách tạo Slide băng chuyền
Ví dụ bên dưới đây mô tả 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="/images/picture_4.jpg" alt="carousel"> </div> <div class="item"> <img src="/images/picture_1.jpg" alt="carousel"> </div> <div class="item"> <img src="/images/picture_2.jpg" alt="carousel"> </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>
Giải thích ví dụ
Thẻ <div> ngoài cùng:
Slide băng chuyền yêu cầu khai báo id (trong ví dụ trên là id="myCarousel") để các trình điều khiển băng chuyền hoạt động chính xác.
Khai báo lớp class="carousel" bên trong thẻ <div> để chứa slide băng chuyền.
Lớp .slide này thêm hiệu ứng chuyển tiếp và hoạt ảnh CSS, làm cho các slide trượt khi hiển thị một slide mới. Chúng ta có thể bỏ qua lớp này nếu không muốn có hiệu ứng chuyển tiếp.
Thuộc tính data-ride="carousel" yêu cầu Bootstrap bắt đầu tạo hoạt ảnh cho slide băng chuyền ngay lập tức khi tải trang.
Phần "Indicators":
Các chỉ báo là các chấm nhỏ ở cuối mỗi trang trình bày slide (cho biết có bao nhiêu trang trình bày trong slide băng chuyền và người dùng hiện đang xem ở trang trình bày nào).
Các chỉ số thứ tự được chỉ định trong một thẻ danh sách có thứ tự <li> với lớp .carousel-indicators.
Thuộc tính data-target trỏ đến thuộc tính id của slide băng chuyền.
Thuộc tính data-slide-to chỉ định trang trình bày sẽ chuyển tiếp slide tiếp theo, khi người dùng nhấp vào dấu chấm cụ thể.
Phần "Wrapper for slides":
Các trang trình bày slide được khai báo bên trong thẻ <div> với một lớp .carousel-inner.
Nội dung của mỗi slide được định nghĩa bên trong thẻ <div> với lớp .item. Nội dung này có thể là một 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 trang trình chiếu. Nếu không, Slide băng chuyền sẽ không hiển thị.
Phần "Left and right controls":
Đoạn mã này bổ sung các nút "left" và "right" cho phép người dùng chuyển qua lại giữa các trang trình bày theo cách thủ công.
Thuộc tính data-slide chấp nhận các từ khóa "prev" hoặc "next", dùng để thay đổi vị trí trang trình bày so với vị trí hiện tại của nó.
Thêm chú thích vào Slide trình bày
Thêm thẻ <div> với lớp class="carousel-caption" vào bên trong mỗi thẻ <div class="item"> để tạo chú thích cho mỗi trang trình bày.
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="/images/picture_4.jpg" alt="carousel"> <div class="carousel-caption"> <h3>Vũng Tàu</h3> <p>Sóng biển dạt dào!</p> </div> </div> <div class="item"> <img src="/images/picture_1.jpg" alt="carousel"> <div class="carousel-caption"> <h3>Sơn La</h3> <p>Núi rừng tây bắc!</p> </div> </div> <div class="item"> <img src="/images/picture_2.jpg" alt="carousel"> <div class="carousel-caption"> <h3>Điện Biên</h3> <p>Cánh đồng lúa mạch!</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>