캐러셀

캐러셀 (Carousel)

이미지나 텍스트 슬라이드 같은 요소들을 순환하는 슬라이드쇼 컴포넌트입니다.

출처: 문서

본문

동작 방식 (How it works)

• 캐러셀은 CSS 3D 트랜스폼과 약간의 JavaScript로 만들어진, 일련의 콘텐츠를 순환하는 슬라이드쇼입니다. 이미지, 텍스트, 커스텀 마크업의 시리즈와 함께 작동합니다. 이전/다음 컨트롤과 인디케이터 지원도 포함합니다.
• 성능상의 이유로 캐러셀은 carousel 생성자(constructor) 메서드로 수동 초기화해야 합니다. 초기화하지 않으면 일부 이벤트 리스너(특히 터치/스와이프 지원에 필요한 이벤트)는 사용자가 컨트롤이나 인디케이터를 명시적으로 활성화할 때까지 등록되지 않습니다.
• 유일한 예외는 data-bs-ride="carousel" 속성이 있는 자동 재생 캐러셀로, 이들은 페이지 로드 시 자동 초기화됩니다. 데이터 속성으로 자동 재생 캐러셀을 사용한다면 같은 캐러셀을 생성자 메서드로 명시적으로 초기화하지 마세요.
• 중첩 캐러셀은 지원되지 않습니다. 또한 캐러셀은 일반적으로 사용성과 접근성 문제를 자주 일으킬 수 있다는 점도 알아두어야 합니다.

이 컴포넌트의 애니메이션 효과는 prefers-reduced-motion 미디어 쿼리에 의존합니다. 저희 접근성 문서의 reduced motion 섹션을 참고하세요.

기본 예제 (Basic examples)

세 개의 슬라이드가 있는 기본 캐러셀 예제입니다. 이전/다음 컨트롤에 주목하세요. <button> 요소를 권장하지만, role="button"을 가진 <a> 요소를 사용할 수도 있습니다.

<div id="carouselExample" class="carousel slide">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

캐러셀은 슬라이드 크기를 자동으로 정규화하지 않습니다. 따라서 콘텐츠 크기를 적절히 맞추려면 추가 유틸리티나 커스텀 스타일이 필요할 수 있습니다. 캐러셀이 이전/다음 컨트롤과 인디케이터를 지원하지만 반드시 필요한 것은 아닙니다. 원하는 대로 추가하고 커스터마이징하세요.

슬라이드 중 하나에 .active 클래스를 추가해야 합니다. 그렇지 않으면 캐러셀이 보이지 않습니다. 또한 선택적 컨트롤을 위해 .carousel에 고유한 id를 설정하세요. 특히 한 페이지에 여러 캐러셀을 사용하는 경우요. 컨트롤과 인디케이터 요소는 .carousel 요소의 id와 일치하는 data-bs-target 속성(링크라면 href)을 가져야 합니다.

인디케이터 (Indicators)

캐러셀에 인디케이터를 추가할 수 있습니다. 이전/다음 컨트롤과 함께 사용합니다. 인디케이터는 사용자가 특정 슬라이드로 직접 이동할 수 있게 해줍니다.

<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

캡션 (Captions)

.carousel-item 안의 .carousel-caption 요소로 슬라이드에 캡션을 추가할 수 있습니다. 아래처럼 선택적 display 유틸리티를 사용하면 더 작은 뷰포트에서 쉽게 숨길 수 있습니다. .d-none으로 처음에는 숨기고, 중간 크기 기기에서 .d-md-block으로 다시 보이게 합니다.

<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

크로스페이드 (Crossfade)

캐러셀에 .carousel-fade를 추가하면 슬라이드 대신 페이드 전환으로 슬라이드를 애니메이션합니다. 캐러셀 콘텐츠(예: 텍스트만 있는 슬라이드)에 따라, 올바른 크로스페이딩을 위해 .carousel-item들에 .bg-body나 커스텀 CSS를 추가하고 싶을 수 있습니다.

<div id="carouselExampleFade" class="carousel slide carousel-fade">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

자동 재생 캐러셀 (Autoplaying carousels)

ride 옵션을 carousel로 설정하면 페이지 로드 시 캐러셀이 자동 재생되게 할 수 있습니다. 자동 재생 캐러셀은 마우스를 올리면 자동으로 일시 정지합니다. 이 동작은 pause 옵션으로 제어할 수 있습니다. Page Visibility API를 지원하는 브라우저에서 캐러셀은 웹페이지가 사용자에게 보이지 않을 때(브라우저 탭이 비활성화되거나 브라우저 창이 최소화된 경우 등) 순환을 멈춥니다.

접근성상의 이유로 자동 재생 캐러셀 사용을 피할 것을 권장합니다. 페이지에 자동 재생 캐러셀이 포함된다면, 캐러셀을 명시적으로 일시 정지/중지하는 추가 버튼이나 컨트롤을 제공할 것을 권장합니다.

WCAG 2.2 성공 기준 2.2.2 Pause, Stop, Hide를 참고하세요.

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

ride 옵션이 carousel가 아니라 true로 설정되면 캐러셀은 페이지 로드 시 자동으로 순환을 시작하지 않습니다. 대신 첫 사용자 상호작용 후에만 시작합니다.

<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

개별 .carousel-item 간격 (Individual .carousel-item interval)

.carousel-item에 data-bs-interval=""을 추가해 다음 항목으로 자동 순환하기까지 지연되는 시간을 변경할 수 있습니다.

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

컨트롤 없는 자동 재생 캐러셀 (Autoplaying carousels without controls)

슬라이드만 있는 캐러셀입니다. 캐러셀 이미지의 .d-block과 .w-100에 주목하세요. 브라우저 기본 이미지 정렬을 방지합니다.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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>

터치 스와이프 비활성화 (Disable touch swiping)

캐러셀은 터치스크린 기기에서 슬라이드 사이를 이동하기 위한 좌/우 스와이프를 지원합니다. touch 옵션을 false로 설정해 비활성화할 수 있습니다.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

다크 변형 (Dark variant) — v5.3.0에서 폐기

더 어두운 컨트롤, 인디케이터, 캡션을 위해 .carousel에 .carousel-dark를 추가하세요. 컨트롤은 filter CSS 속성으로 기본 흰색 채움과 비교해 반전됩니다. 캡션과 컨트롤에는 색과 배경색을 커스터마이즈하는 추가 Sass 변수가 있습니다.

주의! 컴포넌트의 다크 변형은 색상 모드 도입과 함께 v5.3.0에서 폐기되었습니다. .carousel-dark를 추가하는 대신 루트 요소, 부모 래퍼, 또는 컴포넌트 자체에 data-bs-theme="dark"를 설정하세요.

<div id="carouselExampleDark" class="carousel carousel-dark slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

커스텀 전환 (Custom transition)

.carousel-item의 전환 지속 시간은 컴파일 전에 $carousel-transition-duration Sass 변수로, 또는 컴파일된 CSS를 사용한다면 커스텀 스타일로 변경할 수 있습니다. 여러 전환을 적용한다면 transform 전환이 먼저 정의되도록 하세요 (예: transition: transform 2s ease, opacity .5s ease-out).

CSS

Sass 변수 (Sass variables)

모든 캐러셀에 대한 변수:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;
$carousel-control-icon-filter:       null;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

다크 캐러셀에 대한 변수:

$carousel-dark-indicator-active-bg:  $black; // Deprecated in v5.3.4
$carousel-dark-caption-color:        $black; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter:  invert(1) grayscale(100); // Deprecated in v5.3.4

사용법 (Usage)

데이터 속성으로 (Via data attributes)

데이터 속성을 사용해 캐러셀의 위치를 쉽게 제어할 수 있습니다. data-bs-slide는 prev 또는 next 키워드를 받으며, 현재 위치를 기준으로 슬라이드 위치를 변경합니다. 또는 data-bs-slide-to를 사용해 캐러셀 data-bs-slide-to="2"에 원시 슬라이드 인덱스를 전달하면, 0부터 시작하는 특정 인덱스로 슬라이드 위치를 옮깁니다.

JavaScript로 (Via JavaScript)

캐러셀을 수동으로 호출합니다:

const carousel = new bootstrap.Carousel('#myCarousel')

옵션 (Options)

옵션은 데이터 속성이나 JavaScript로 전달할 수 있으므로 data-bs-animation="{value}"처럼 data-bs-에 옵션 이름을 붙일 수 있습니다. 데이터 속성으로 옵션을 전달할 때는 옵션 이름의 표기(camelCase)를 "kebab-case"로 바꿔야 합니다. 예를 들어 data-bs-customClass="beautifier" 대신 data-bs-custom-class="beautifier"를 사용하세요.

Bootstrap 5.2.0부터 모든 컴포넌트는 간단한 컴포넌트 설정을 JSON 문자열로 담을 수 있는 실험적 예약 데이터 속성 data-bs-config를 지원합니다. 요소에 data-bs-config='{"delay":0, "title":123}'과 data-bs-title="456" 속성이 있으면 최종 title 값은 456이 되고, 별도의 데이터 속성이 data-bs-config에 주어진 값을 덮어씁니다. 또한 기존 데이터 속성이 data-bs-delay='{"show":0,"hide":150}'처럼 JSON 값을 담을 수 있습니다.

최종 설정 객체는 data-bs-config, data-bs-, js 객체를 병합한 결과로, 가장 나중에 주어진 키-값이 다른 것들을 덮어씁니다.

이름	타입	기본값	설명
interval	number	5000	항목을 자동으로 순환하는 사이의 지연 시간입니다.
keyboard	boolean	true	캐러셀이 키보드 이벤트에 반응할지 여부입니다.
pause	string, boolean	"hover"	"hover"로 설정하면 mouseenter에 캐러셀 순환이 일시 정지되고 mouseleave에 재개됩니다. false로 설정하면 캐러셀에 마우스를 올려도 일시 정지되지 않습니다. 터치 지원 기기에서 "hover"로 설정하면 순환은 touchend(사용자가 캐러셀과의 상호작용을 끝낸 후)에 두 간격 동안 일시 정지된 후 자동으로 재개됩니다. 이는 마우스 동작에 추가됩니다.
ride	string, boolean	false	true로 설정하면 사용자가 첫 항목을 수동으로 순환한 후 캐러셀을 자동 재생합니다. "carousel"로 설정하면 로드 시 캐러셀을 자동 재생합니다.
touch	boolean	true	캐러셀이 터치스크린 기기에서 좌/우 스와이프 상호작용을 지원할지 여부입니다.
wrap	boolean	true	캐러셀이 연속적으로 순환할지, 아니면 하드 스톱을 가질지 여부입니다.

메서드 (Methods)

모든 API 메서드는 비동기이며 전환을 시작합니다. 전환이 시작되자마자, 즉 끝나기 전에 호출자에게 반환됩니다. 또한 전환 중인 컴포넌트에 대한 메서드 호출은 무시됩니다. 자세한 내용은 JavaScript 문서를 참고하세요.

carousel 생성자로 캐러셀 인스턴스를 만들고 추가 옵션을 전달할 수 있습니다. 예를 들어 특정 간격과 터치 지원 비활성으로 자동 재생 캐러셀을 수동 초기화하려면(마크업에서 data-bs-ride="carousel" 속성을 사용하지 않는다고 가정) 다음과 같이 사용할 수 있습니다:

const myCarouselElement = document.querySelector('#myCarousel')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})

메서드	설명
cycle	캐러셀 항목을 왼쪽에서 오른쪽으로 순환하기 시작합니다.
dispose	요소의 캐러셀을 파괴합니다. (DOM 요소에 저장된 데이터를 제거합니다.)
getInstance	DOM 요소에 연결된 캐러셀 인스턴스를 가져올 수 있는 정적 메서드입니다. 이렇게 사용할 수 있습니다: bootstrap.Carousel.getInstance(element).
getOrCreateInstance	DOM 요소에 연결된 캐러셀 인스턴스를 반환하거나, 초기화되지 않았다면 새로 만드는 정적 메서드입니다. 이렇게 사용할 수 있습니다: bootstrap.Carousel.getOrCreateInstance(element).
next	다음 항목으로 순환합니다. 다음 항목이 보이기 전에(즉, slid.bs.carousel 이벤트가 발생하기 전에) 호출자에게 반환됩니다.
nextWhenVisible	페이지, 캐러셀, 또는 캐러셀의 부모가 보이지 않을 때 캐러셀을 다음으로 순환하지 않습니다. 타깃 항목이 보이기 전에 호출자에게 반환됩니다.
pause	캐러셀이 항목을 순환하는 것을 멈춥니다.
prev	이전 항목으로 순환합니다. 이전 항목이 보이기 전에(즉, slid.bs.carousel 이벤트가 발생하기 전에) 호출자에게 반환됩니다.
to	캐러셀을 특정 프레임(0 기반, 배열과 유사)으로 순환합니다. 타깃 항목이 보이기 전에(즉, slid.bs.carousel 이벤트가 발생하기 전에) 호출자에게 반환됩니다.

이벤트 (Events)

Bootstrap의 캐러셀 클래스는 캐러셀 기능에 훅을 걸기 위한 두 가지 이벤트를 노출합니다. 두 이벤트 모두 다음의 추가 속성이 있습니다:

• direction: 캐러셀이 슬라이딩되는 방향 ("left" 또는 "right").
• relatedTarget: active 항목으로 슬라이딩되고 있는 DOM 요소.
• from: 현재 항목의 인덱스
• to: 다음 항목의 인덱스

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

이벤트 타입	설명
slid.bs.carousel	캐러셀이 슬라이드 전환을 완료했을 때 발생합니다.
slide.bs.carousel	slide 인스턴스 메서드가 호출되는 즉시 발생합니다.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

더 알아보기 (Learn more)

• Bootstrap 문서