부트스트랩 4 JS 캐러셀
캐러셀 CSS 클래스
Carousel에 대한 자습서는 Bootstrap Carousel Tutorial 을 참조 하십시오.
| 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 |
데이터-* 속성을 통해
속성 은 data-ride="carousel"캐러셀을 활성화합니다.
data-slide및 속성 은 data-slide-to이동할 슬라이드를 지정합니다.
data-slide속성은 두 가지 값을 허용합니다. prev 또는 next
, 숫자를
data-slide-to허용합니다.
예시
<!-- 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>
자바스크립트를 통해
다음을 사용하여 수동으로 활성화:
예시
// Activate Carousel
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".carousel-control-prev").click(function(){
$("#myCarousel").carousel("prev");
});
캐러셀 옵션
옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 data-interval=""에서와 같이 옵션 이름을 data-에 추가합니다.
| 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 |
|
| keyboard | boolean | true | Specifies whether the carousel should react to keyboard events:
|
|
| 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 |
|
| wrap | boolean | true | Specifies whether the carousel should go through all slides continuously, or stop at the last slide
|
캐러셀 방식
다음 표에는 사용 가능한 모든 캐러셀 방법이 나열되어 있습니다.
| Method | Description | Try it |
|---|---|---|
| .carousel(options) | Activates the carousel with an option. See options above for valid values | |
| .carousel("cycle") | Goes through the carousel items from left to right | |
| .carousel("pause") | Stops the carousel from going through items | |
| .carousel(number) | Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) | |
| .carousel("prev") | Goes to the previous item | |
| .carousel("next") | Goes to the next item | |
| .carousel("dispose") | Destroys a carousel |
캐러셀 이벤트
다음 표에는 사용 가능한 모든 캐러셀 이벤트가 나열되어 있습니다.
| Event | Description | Try it |
|---|---|---|
| slide.bs.carousel | Occurs when the carousel is about to slide from one item to another | |
| slid.bs.carousel | Occurs when the carousel has finished sliding from one item to another |
슬라이드 및 슬라이드 이벤트에는 다음과 같은 추가 속성도 있습니다.
| 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 | |
| from | Returns the index of where the previous item came from, when moving on to the next one | |
| to | Returns the index of the next item |