Source

회전 목마

회전 목마와 같은 요소(이미지 또는 텍스트 슬라이드)를 순환하기 위한 슬라이드쇼 구성 요소입니다.

작동 방식

캐러셀은 CSS 3D 변환과 약간의 JavaScript로 구축된 일련의 콘텐츠를 순환하는 슬라이드쇼입니다. 일련의 이미지, 텍스트 또는 사용자 지정 마크업과 함께 작동합니다. 또한 이전/다음 컨트롤 및 표시기에 대한 지원도 포함합니다.

Page Visibility API 가 지원되는 브라우저에서 캐러셀은 웹페이지가 사용자에게 표시되지 않을 때(예: 브라우저 탭이 비활성화된 경우, 브라우저 창이 최소화된 경우 등) 슬라이딩을 방지합니다.

중첩 캐러셀은 지원되지 않으며 캐러셀은 일반적으로 접근성 표준을 준수하지 않습니다.

마지막으로 소스에서 JavaScript를 빌드하는 경우util.js .

예시

캐러셀은 슬라이드 크기를 자동으로 정규화하지 않습니다. 따라서 콘텐츠의 크기를 적절하게 조정하려면 추가 유틸리티나 사용자 정의 스타일을 사용해야 할 수도 있습니다. 캐러셀은 이전/다음 컨트롤 및 표시기를 지원하지만 명시적으로 필요하지는 않습니다. 필요에 따라 추가하고 사용자 정의하십시오.

.carousel특히 단일 페이지에서 여러 캐러셀을 사용하는 경우 선택적 컨트롤 에 대해 고유 ID를 설정해야 합니다.

슬라이드만

슬라이드만 있는 회전목마가 있습니다. 브라우저 기본 이미지 정렬을 방지하기 위해 .d-block및 캐러셀 이미지가 있는지 확인 합니다..img-fluid

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

컨트롤 포함

이전 및 다음 컨트롤에 추가:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

지표 포함

컨트롤과 함께 캐러셀에 표시기를 추가할 수도 있습니다.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
초기 활성 요소 필요

슬라이드 중 하나 에 .active수업을 추가해야 합니다. 그렇지 않으면 캐러셀이 표시되지 않습니다.

캡션 포함

.carousel-caption에 있는 요소 를 사용하여 슬라이드에 캡션을 쉽게 추가할 수 있습니다 .carousel-item. 옵션 표시 유틸리티 를 사용하여 아래와 같이 작은 뷰포트에서 쉽게 숨길 수 있습니다 . 처음에는 로 숨기고 .d-none중형 기기에서는 로 다시 가져옵니다 .d-md-block.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

용법

데이터 속성을 통해

데이터 속성을 사용하여 캐러셀의 위치를 ​​쉽게 제어할 수 있습니다. 현재 위치를 기준으로 슬라이드 위치를 변경하는 또는 data-slide키워드를 허용합니다 . 또는 를 사용 하여 슬라이드 위치를 로 시작하는 특정 인덱스로 이동하는 캐러셀에 원시 슬라이드 인덱스를 전달합니다 .prevnextdata-slide-todata-slide-to="2"0

이 data-ride="carousel"속성은 캐러셀을 페이지 로드 시 시작되는 애니메이션으로 표시하는 데 사용됩니다. 동일한 캐러셀의 (중복적이고 불필요한) 명시적 JavaScript 초기화와 함께 사용할 수 없습니다.

자바스크립트를 통해

다음을 사용하여 수동으로 캐러셀을 호출합니다.

$('.carousel').carousel()

옵션

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

이름 유형 기본 설명
간격 숫자 5000 항목을 자동으로 순환하는 사이의 지연 시간입니다. false인 경우 캐러셀이 자동으로 순환하지 않습니다.
건반 부울 진실 캐러셀이 키보드 이벤트에 반응해야 하는지 여부입니다.
정지시키다 문자열 | 부울 "호버"

로 설정 "hover"하면 캐러셀의 순환이 일시 중지되고 캐러셀 mouseenter의 순환이 다시 시작됩니다 mouseleave. 로 설정 false하면 캐러셀 위로 마우스를 가져가도 일시중지되지 않습니다.

터치 지원 장치에서 로 설정하면 "hover"사이클링이 touchend자동으로 다시 시작되기 전에 두 간격 동안(사용자가 캐러셀과의 상호작용을 마치면) 일시 중지됩니다. 이것은 위의 마우스 동작에 추가된 것입니다.
타다 끈 거짓 사용자가 첫 번째 항목을 수동으로 순환한 후 캐러셀을 자동 재생합니다. '캐러셀'인 경우 로드 시 캐러셀이 자동 재생됩니다.
포장하다 부울 진실 캐러셀이 계속 순환해야 하는지 아니면 정지해야 하는지 여부.

행동 양식

비동기식 메서드 및 전환

모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 그러나 끝나기 전에 호출자에게 돌아갑니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

자세한 내용은 JavaScript 설명서를 참조하십시오.

.carousel(options)

선택적 옵션으로 캐러셀을 초기화하고 object항목 순환을 시작합니다.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

캐러셀 항목을 왼쪽에서 오른쪽으로 순환합니다.

.carousel('pause')

캐러셀이 항목을 순환하는 것을 중지합니다.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('prev')

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('next')

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('dispose')

Destroys an element’s carousel.

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: 활성 항목으로 슬라이드되는 DOM 요소입니다.
  • from: 현재 항목의 인덱스
  • to: 다음 항목의 인덱스

모든 캐러셀 이벤트는 캐러셀 자체(즉, <div class="carousel">)에서 발생합니다.

이벤트 유형 설명
Slide.bs.carousel slide이 이벤트는 인스턴스 메서드가 호출 될 때 즉시 발생합니다 .
slid.bs.carousel 이 이벤트는 캐러셀이 슬라이드 전환을 완료하면 시작됩니다. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})