부트 스트랩-캐 러셀 플러그인

부트 스트랩 캐 러셀은 사이트에 슬라이더를 추가하는 유연하고 반응이 빠른 방법입니다. 반응 형일뿐만 아니라 콘텐츠는 이미지, iframe, 비디오 또는 원하는 거의 모든 유형의 콘텐츠를 허용 할 수있을만큼 유연합니다.

이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. carousel.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .

예

아래의 간단한 슬라이드 쇼는 Bootstrap 캐 러셀 플러그인을 사용하여 캐 러셀과 같은 요소를 순환하는 일반적인 구성 요소를 보여줍니다. 캐 러셀을 구현하려면 마크 업이있는 코드를 추가하기 만하면됩니다. 데이터 속성은 필요 없으며 단순한 클래스 기반 개발입니다.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

선택적 캡션

슬라이드에 캡션을 쉽게 추가 할 수 있습니다. .carousel-caption 요소 내의 .item. 옵션 HTML을 거기에 넣으면 자동으로 정렬되고 서식이 지정됩니다. 다음 예제는 이것을 보여줍니다-

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

용법

Via data attributes − 데이터 속성을 사용하여 캐 러셀의 위치를 쉽게 제어 할 수 있습니다.
- 속성 data-slide현재 위치를 기준으로 슬라이드 위치를 변경하는 prev 또는 next 키워드를 허용합니다 .
- 사용하다 data-slide-to 원시 슬라이드 인덱스를 캐 러셀에 전달 data-slide-to = "2", 슬라이드 위치를 0으로 시작하는 특정 인덱스로 이동합니다.
- 그만큼 data-ride = "carousel" 속성은 페이지로드시 시작되는 애니메이션으로 캐 러셀을 표시하는 데 사용됩니다.
Via JavaScript − 캐 러셀은 아래와 같이 JavaScript로 수동 호출 가능합니다 −

$('.carousel').carousel()

옵션

데이터 속성 또는 JavaScript를 통해 전달할 수있는 특정 옵션이 다음 표에 나열되어 있습니다.

옵션 이름	유형 / 기본값	데이터 속성 이름	기술
간격	숫자 기본값-5000	데이터 간격	항목 자동 순환 사이의 지연 시간입니다. false이면 캐 러셀이 자동으로 순환되지 않습니다.
중지	문자열 기본값- "hover"	데이터 일시 중지	mouseenter에서 캐 러셀 순환을 일시 중지하고 mouseleave에서 캐 러셀 순환을 다시 시작합니다.
싸다	부울 기본값-참	데이터 랩	캐 러셀이 계속 순환해야하는지 또는 급정지해야하는지 여부입니다.

행동 양식

다음은 캐 러셀 코드와 함께 사용할 수있는 유용한 메서드 목록입니다.

방법	기술	예
.carousel (옵션)	선택적 옵션 개체를 사용하여 캐 러셀을 초기화하고 항목 순환을 시작합니다.	`$('#identifier').carousel({ interval: 2000 })`
.carousel ( 'cycle')	캐 러셀 항목을 왼쪽에서 오른쪽으로 순환합니다.	`$('#identifier').carousel('cycle')`
.carousel ( 'pause')	캐 러셀이 항목을 순환하는 것을 중지합니다.	`$('#identifier')..carousel('pause')`
.carousel (숫자)	캐 러셀을 특정 프레임으로 순환합니다 (0 기반, 배열과 유사).	`$('#identifier').carousel(number)`
.carousel ( '이전')	이전 항목으로 순환합니다.	`$('#identifier').carousel('prev')`
.carousel ( 'next')	다음 항목으로 순환합니다.	`$('#identifier').carousel('next')`

예

다음 예제는 방법의 사용법을 보여줍니다-

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">            
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>
	
</div> 

<script>
   $(function() {
	
      // Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });
      
      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });
      
      // Cycles the carousel to a particular frame 
      $(".slide-one").click(function() {
         $("#myCarousel").carousel(0);
      });
      
      $(".slide-two").click(function() {
         $("#myCarousel").carousel(1);
      });
      
      $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

이벤트

Bootstrap의 carousel 클래스는 다음 표에 나열된 carousel 기능에 연결하기위한 두 가지 이벤트를 노출합니다.

행사	기술	예
slide.bs.carousel	이 이벤트는 슬라이드 인스턴스 메서드가 호출 될 때 즉시 발생합니다.	`$('#identifier').on('slide.bs.carousel', function () { // do something })`
slid.bs.carousel	이 이벤트는 캐 러셀이 슬라이드 전환을 완료하면 시작됩니다.	`$('#identifier').on('slid.bs.carousel', function () { // do something })`

예

다음 예제는 이벤트의 사용법을 보여줍니다-

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>