Bootstrap Carousel Plugin

The Carousel Plugin

회전목마(캐로우젤: Carousel) 플러그인은 회전목마(carousel) 처럼 요소들의 순환시키는(cycling) 구성요소이다(슬라이드 쇼:slideshow).

이 플러그 인은 "bootstrap.js"에 (or 축소된 "bootstrap.min.js" 파일에) 포함되어 있다.

	Tip: 플러그인(Plugins)들은 (Bootstrap의 개별 *.js 파일을 사용해서) 개별적으로 포함시킬 수 있고, 또는 한번에 모두 ("bootstrap.js" or "bootstrap.min.js"을 사용해서) 포함시킬 수 있다. Carousel을 위한 Bootstrap에서의 개별적 .js 파일은 "carousel.js"이다.

Carousel Example

	Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect).

How To Create a Carousel

다음의 예는 기본적인 카로우젤(basic carousel) 만드는 방법을 보여준다. :

Example

Try it Yourself »

Example Explained

가장 바깥 쪽 <div>:

회전목마(carousel)은 회전목마(carousel)이 적절이 콘트롤 될 수 있도록 id 사용(in this case id="myCarousel")을 필요로 한다.

class="carousel slide" 는 이 <div> 이 회전목마(carousel)을 포함하고 있음을 명시한다.

data-ride="carousel" 속성은 Bootstrap 에게 페이지가 로드될 때 바로 회전목마(carousel) 에니메이션을 시작하도록 알려준다.

The "Indicators" part:

표시자(indicators)는 각 슬라이드 아래에 있는 작은 점들이다 (이는 카로우젤( carousel)에 얼마나 많은 슬라이드가 있으며, 사용자가 현재 어떤 슬라이드를 보고 있는지를 표시한다).

표시자(indicators)는 .carousel-indicators 크래스를 갖는 ordered list로 명시된다.

.data-target 클래스는 카로우젤(carousel)의 id 를 가리킨다.

.data-slide-to 클래스는 큭정 점(dot)을 클릭할 때 어느 슬라이드로 가라 지를 명시한다.

The "Wrapper for slides" part:

슬라이드들은 .carousel-inner.클래스와 함께 a <div> 안에 명시됩니다.

각 슬라이드의 내용은 .item. 클래스와 함께 <div> 안에 정의됩니다. 이는 켁스트나 이미지가 될 수 있다.

슬라이들들 중의 하나에는 .active 클래스를 추가 할 필요가 있다. 그렇지 않으면, 카로우젤(carousel)이 표시되지 않습니다.

The "Left and right controls" part:

이 코드는 사용자가 슬라이들 사이를 앞과 뒤로 옮겨 다닐 수 있도록 "left" 과 "right" 버튼을 추가 한다.

.data-slide 클래스는 현재 위치애 대한 슬라이드 위치를 변경하는 키워드(keywords) "prev" or "next"를 허용한다.

Add Captions to Slides

각 슬라이드에 대한 캡션을 생성하기위해서 각 <div class="item"> 안에 <div class="carousel-caption"> 를 추가한다. :

Example

<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>Beatiful 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>Beatiful 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>

Try it Yourself »

« Previous Next Chapter »