Băng chuyền JS Bootstrap 4
Lớp CSS băng chuyền
Để biết hướng dẫn về Băng chuyền, hãy đọc Hướng dẫn về Băng chuyền Bootstrap của chúng tôi.
| Class | Description |
|---|---|
.carousel |
Creates a carousel |
.carousel-indicators |
Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
.carousel-inner |
Adds slides to the carousel |
.carousel-item |
Specifies the content of each slide |
.carousel-control-prev |
Adds a left (previous) button to the carousel, which allows the user to go back between the slides |
.carousel-control-next |
Adds a right (next) button to the carousel, which allows the user to go forward between the slides |
.carousel-control-prev-icon |
Used together with .carousel-control-prev to create a "previous" button |
.carousel-control-next-icon |
Used together with .carousel-control-next to create a "next" button |
.carousel-caption |
Specifies a caption for the carousel |
.slide |
Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
Thông qua thuộc tính data-*
Thuộc tính data-ride="carousel" kích hoạt băng chuyền.
Các thuộc tính data-slide và data-slide-to chỉ định slide nào sẽ đi tới.
Thuộc tính data-slide chấp nhận hai giá trị: prev hoặc next , trong khi data-slide-to chấp nhận các số.
Ví dụ
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- Carousel Controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>Hãy tự mình thử »Thông qua JavaScript
Kích hoạt thủ công với:
Ví dụ
// Activate Carousel
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".carousel-control-prev").click(function(){
$("#myCarousel").carousel("prev");
});
Hãy tự mình thử »Tùy chọn băng chuyền
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với thuộc tính dữ liệu, hãy thêm tên tùy chọn vào data-, như trong data-interval="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding |
Using JS Using data |
| keyboard | boolean | true | Specifies whether the carousel should react to keyboard events:
|
Using JS Using data |
| pause | string, or the boolean false | "hover" | Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel Note: Set pause to false to stop the ability to pause on hover |
Using JS Using data |
| wrap | boolean | true | Specifies whether the carousel should go through all slides continuously, or stop at the last slide
|
Using JS Using data |
Phương pháp băng chuyền
Bảng sau liệt kê tất cả các phương pháp quay vòng có sẵn.
| Method | Description | Try it |
|---|---|---|
| .carousel( options ) | Activates the carousel with an option. See options above for valid values | Try it |
| .carousel("cycle") | Goes through the carousel items from left to right | Try it |
| .carousel("pause") | Stops the carousel from going through items | Try it |
| .carousel(number) | Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) | Try it |
| .carousel("prev") | Goes to the previous item | Try it |
| .carousel("next") | Goes to the next item | Try it |
| .carousel("dispose") | Destroys a carousel |
Sự kiện băng chuyền
Bảng sau liệt kê tất cả các sự kiện băng chuyền có sẵn.
| Event | Description | Try it |
|---|---|---|
| slide.bs.carousel | Occurs when the carousel is about to slide from one item to another | Try it |
| slid.bs.carousel | Occurs when the carousel has finished sliding from one item to another | Try it |
Các sự kiện trượt và trượt cũng có các thuộc tính bổ sung:
| Property | Description | Try it |
|---|---|---|
| direction | Returns the direction the carousel is sliding (left or right) | |
| relatedTarget | Returns the DOM element that is being slid into place as the active item | Try it |
| from | Returns the index of where the previous item came from, when moving on to the next one | Try it |
| to | Returns the index of the next item | Try it |
