부트스트랩 JS 캐러셀

JS 캐러셀(carousel.js)

회전 목마 플러그인은 회전 목마(슬라이드 쇼)와 같은 요소를 순환하는 구성 요소입니다.

Carousel에 대한 자습서는 Bootstrap Carousel Tutorial 을 참조 하십시오.

참고: 캐러셀은 Internet Explorer 9 및 이전 버전에서 제대로 지원되지 않습니다(슬라이드 효과를 얻기 위해 CSS3 전환 및 애니메이션을 사용하기 때문).

캐러셀 플러그인 클래스

Class	Description
.carousel	Creates a 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
.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
.icon-next	Unicode icon (arrow pointing right), used in carousels. This is often used instead of a glyphicon
.icon-prev	Unicode icon (arrow pointing left), used in carousels. This is often used instead of a glyphicon
.item	Specifies the content of each slide
.left carousel-control	Adds a left button to the carousel, which allows the user to go back between the slides
.right carousel-control	Adds a right button to the carousel, which allows the user to go forward between the slides
.carousel-caption	Specifies a caption for the carousel

데이터-* 속성을 통해

속성 은 data-ride="carousel"캐러셀을 활성화합니다.

data-slide및 속성 은 data-slide-to이동할 슬라이드를 지정합니다.

data-slide속성은 두 가지 값을 허용합니다. prev 또는 next , 숫자를 data-slide-to허용합니다.

예시

<div id="myCarousel" class="carousel slide" data-ride="carousel">


<li data-target="#myCarousel" data-slide-to="1"></li>


<a class="left carousel-control" href="#myCarousel" data-slide="prev">

자바스크립트를 통해

다음을 사용하여 수동으로 활성화:

예시

// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});

// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});

캐러셀 옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 data-interval=""에서와 같이 옵션 이름을 data-에 추가합니다.

Name	Type	Default	Description
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
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 true - cycle continuously false - stop at the last item

캐러셀 방식

다음 표에는 사용 가능한 모든 캐러셀 방법이 나열되어 있습니다.

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

캐러셀 이벤트

다음 표에는 사용 가능한 모든 캐러셀 이벤트가 나열되어 있습니다.

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

더 많은 예

슬라이드에 캡션

<div class="carousel-caption">각 <div class="item">슬라이드에 대한 캡션을 만들려면 다음을 추가하십시오 .

예시

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>


<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
</div>


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

❮ 이전의 다음 ❯

부트스트랩 3 튜토리얼

부트스트랩 그리드

부트스트랩 테마

부트스트랩 예제

부트스트랩 CSS 참조

부트스트랩 JS 참조