Source

회전 목마

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

작동 방식

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

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

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

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

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

예시

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

.active슬라이드 중 하나에 클래스를 추가해야 합니다. 그렇지 않으면 캐러셀이 표시되지 않습니다. .carousel또한 특히 단일 페이지에서 여러 캐러셀을 사용하는 경우 선택적 컨트롤 에 대해 고유 ID를 설정해야 합니다 . 제어 및 표시기 요소에는 요소 의 ID와 일치 하는 data-target속성(또는 링크의 경우)이 있어야 합니다 .href.carousel

슬라이드만

슬라이드만 있는 회전목마가 있습니다. 브라우저 기본 이미지 정렬을 방지하기 위해 .d-block및 캐러셀 이미지 의 존재에 유의하십시오 ..w-100

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

컨트롤 포함

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

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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 src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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>

캡션 포함

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

크로스페이드

.carousel-fade슬라이드 대신 페이드 ​​전환을 사용하여 슬라이드에 애니메이션을 적용하려면 슬라이드에 추가 하세요.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

다음 항목으로 자동 순환되는 지연 시간을 변경하려면 에 추가 data-interval=""합니다 ..carousel-item

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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)

캐러셀을 특정 프레임으로 순환합니다(0 기반, 배열과 유사). 대상 항목이 표시 되기 전(즉, 이벤트가 발생하기 전) 호출자에게 반환합니다 .slid.bs.carousel

.carousel('prev')

이전 항목으로 순환합니다. 이전 항목이 표시 되기 전(즉, slid.bs.carousel이벤트가 발생하기 전) 호출자에게 반환합니다.

.carousel('next')

다음 항목으로 순환합니다. 다음 항목이 표시 되기 전에(즉, 이벤트가 발생하기 전에) 호출자에게 반환합니다 .slid.bs.carousel

.carousel('dispose')

요소의 회전 목마를 파괴합니다.

이벤트

부트스트랩의 캐러셀 클래스는 캐러셀 기능에 연결하기 위한 두 가지 이벤트를 노출합니다. 두 이벤트에는 다음과 같은 추가 속성이 있습니다.

  • direction: 캐러셀이 미끄러지는 방향( "left"또는 "right").
  • relatedTarget: 활성 항목으로 슬라이드되는 DOM 요소입니다.
  • from: 현재 항목의 인덱스
  • to: 다음 항목의 인덱스

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

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

전환 기간 변경

의 전환 기간은 컴파일하기 전에 Sass 변수를 사용하거나 컴파일된 CSS를 사용하는 경우 사용자 정의 스타일 .carousel-item로 변경할 수 있습니다 . $carousel-transition다중 전환이 적용되는 경우 변형 전환이 먼저 정의되었는지 확인하십시오(예: transition: transform 2s ease, opacity .5s ease-out).