[bootstrap] 부트스트랩 – 이미지 슬라이딩 [캐러젤(Carousel)]

부트스트랩의 캐러젤은 이미지 슬라이드 기능을 하는 플러그인입니다. 슬라이드 애니메이션을 위해 CSS3의 규칙을 사용하므로 IE9 버전 이하에서는 애니메이션 효과가 없습니다.

 

가장 바깥쪽의 div에는 id를 추가합니다. 이 아이디는 .carousel-indicators 내부에 있는 li 태그와 슬라이드 내비게이션 버튼의 타겟이 됩니다. 따라서 여러 개의 캐러젤을 만들려면 이 아이디를 다르게 해야 합니다. 스타일과 슬라이드를 위해 .carousel, .slide 선택자가 추가돼 있습니다. 자바스크리브로 작동하므로 data-ride=”carousel”이 있어야 합니다.

 

ol 태그의 캐러젤 인디케이터는 슬라이더 하단의 불릿으로 클릭하면 해당 순서의 슬라이드가 나타나는 내비게이션 역할도 합니다. data-slide-to 속성의 숫자 값은 슬라이드 순서이며 0의 값이 있는 곳을 클릭하면 첫 번째 슬라이드가 나타납니다.

 

이미지가 있는 .carousel-inner는 img 태그를 .item 선택자의 div로 감싸고 있으며 처음 나타나는 슬라이드를 설정할려면 .item 선택자가 있는 곳에 .active 선택자를 추가하고 같은 순서로 ol 태그의 li에도 .active 선택자를 추가합니다. 여기서는 세 번째 슬라이드에 .active 선택자가 있습니다.

 

슬라이드의 양쪽에 있는 내비게이션 버튼은 기본 선택자로 .carousel-control을 사용하고 왼쪽 버튼은 .left, 오른쪽 버튼은 .right 선택자를 추가합니다. 버튼은 자바스크립트로 작동하므로 data-slide=”prev” 또는 data-slide=”next” 속성을 추가합니다.

 

양쪽에 짙은 회색으로 돼 있는 것은 모바일에서 탭 할 수 있는 영역을 넓히기 위한 것으로 클릭도 가능합니다.

글자는 img 태그와 동일 레벨로 .carousel-caption 선택자를 사용한 div에 추가하며 내비게이터 바로 위에 나타납니다.

<div class=”item active“>
<img data-src=”holder.js/1200×500/text:First slide“>
<div class=”carousel-caption“>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>

 

자바스크립트는 다음과 같은 형태로 사용합니다.

$(“.carousel”).carousel();

 

옵션은 4가지가 있으며 이를 이용해 슬라이드를 제어할 수 있습니다.

$(“.carousel”).carousel({ interval:3000 });

 

• interval : 자동 슬라이드의 경우 다음 슬라이드가 나타날 때까지의 시간이며 기본은 5000ms입니다. 값으로 false를 사용하면 자동 슬라이드가 안됩니다.
• pause : 캐러젤에 마우스를 올렸을 때 슬라이드가 정지됩니다. 기본은 ‘hover’이며 false를 사용하면 마우스를 올려도 슬라이드 됩니다.
• wrap : false로 하면 마지막 슬라이드에서 슬라이드가 정지됩니다. 기본 값은 true입니다.
• keyboard : false로 하면 키보드 이벤트에 반응하지 않습니다. 기본 값은 true입니다.

 

메서드

• $().carousel(‘cycle‘) : 슬라이드가 오른쪽에서 왼쪽으로 이동합니다.
• $().carousel(‘pause‘) : 자동 애니메이션이 정지됩니다.
• $().carousel(number) : 0부터 시작하는 숫자를 넣으면 해당 숫자의 +1번째 이미지가 처음 시작됩니다. 즉 array를 사용하므로 3장의 이미지를 사용하고 있다면 첫 번째 이미지의 숫자는 0인 것입니다.
• $().carousel(‘prev‘) : 이전 아이템으로 이동합니다.
• $().carousel(‘next‘) : 다음 아이템으로 이동합니다.

 

이벤트는 2가지가 있습니다. 슬라이드 될 때마다 나타나므로 alert으로 테스트 하는 것은 자제하는 게 좋습니다.

$(“#myCarousel”).on(‘slide.bs.carousel’, function() {
alert(“이벤트 실행됨”);
});

 

• slide.bs.carousel : 하나의 슬라이드 애니메이션이 시작되기 전에 이벤트가 실행됩니다.
• slide.bs.carousel : 하나의 슬라이드 애니메이션이 종료 후에 이벤트가 실행됩니다.