twitter-bootstrap
회전 목마

비고

기본 HTML 사용

부트 스트랩 회전 목마는 회전 목마 내의 요소를 차례로 순환하는 슬라이드 쇼를 만드는 부트 스트랩 구성 요소입니다.

다음은 기본적인 HTML 사용 예입니다.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

기본 자바 스크립트 사용 및 초기화

Carousel 구성 요소는 $('.carousel').carousel(options) 함수를 사용하여 jQuery를 통해 인스턴스화 할 수 있습니다 $('.carousel').carousel(options) 여기에서 $('.carousel') 은 특정 회전식 메뉴에 대한 최상위 참조이며 options 은 회전식 메뉴를 지정하는 Javascript 객체입니다. 기본 속성.

options 개체를 사용하면 회전식 동작 방식에 영향을주는 여러 속성을 정의 할 수 있습니다. 이러한 속성은 다음과 같이 정의됩니다.

• interval 속성은 사용자가 주어진 회전식 슬라이드 슬라이드를 표시 할 시간을 정의 할 number 있는 Javascript number 유형을 허용합니다. 부울 값 false 가 지정되면 캐 러셀은 자동으로 순환하지 않습니다.
• pause 속성은 사용자의 마우스가 캐 러셀에 들어갈 때 회전 장치의 자동 순환이 일시 중지되는 동작을 토글하는 Javascript string 유형을 허용합니다. 허용되는 기본 (및 유일한) 값은 "마우스 오버"입니다.
• wrap 속성은 자바 스크립트 boolean 유형을 허용합니다.이 유형을 사용하면 슬라이드에서 슬라이드를 멈추지 않고 순환 게재를 계속할지 여부를 사용자가 정의 할 수 있습니다.
• keyboard 속성은 자바 스크립트 boolean 유형을 허용합니다.이 유형을 사용하면 회전식 메뉴가 키보드 이벤트에 응답할지 여부를 정의 할 수 있습니다.

다음은 기본적인 자바 스크립트 사용 예입니다.

$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });

다른 부트 스트랩 구성 요소와 마찬가지로 캐 러셀의 옵션도 데이터 속성을 통해 HTML로 지정할 수 있습니다.