Bootstrap 5 슬라이드 쇼

루프 / 슬라이드

루프(스와이퍼)는 요소를 반복적으로 브라우징하는 슬라이드입니다：

루프를 만드는 방법

다음은 지시기와 제어기를 포함한 기본 루프를 생성하는 방법을 보여줍니다：

예제에 요소를 추가하여 각 슬라이드에 제목을 만들어 주세요:

<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- 指标/点 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <!-- 幻灯片/轮播 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
  </div>
  <!-- 左右控件/图标 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  <span class="carousel-control-next-icon"></span>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    
  <span class="carousel-control-next-icon"></span>
</div>

직접 경험해보세요

</button>

예제 설명

상기 예제의 각 클래스의 역할에 대한 설명: 클래스
설명 .carousel
루프를 생성합니다. .carousel-indicators
루프에 가이더를 추가합니다. 이들은 각 슬라이드 아래의 작은 점입니다.
루프에 슬라이드의 수와 사용자가 현재 확인하고 있는 슬라이드를 나타냅니다. .carousel-inner
슬라이드를 루프에 추가합니다. .carousel-item
각 슬라이드의 내용을 정의합니다. .carousel-control-prev
루프에 왼쪽(이전) 버튼을 추가하여 사용자가 슬라이드 간으로 후진할 수 있도록 합니다. .carousel-control-next
루프에 오른쪽(다음) 버튼을 추가하여 사용자가 슬라이드 간으로 전진할 수 있도록 합니다. .carousel-control-prev-icon
.carousel-control-prev와 함께 사용하여 '이전' 버튼을 생성합니다. .carousel-control-next-icon
.carousel-control-next와 함께 사용하여 '다음' 버튼을 생성합니다. .slide
CSS 전환 및 애니메이션 효과를 추가하여 프로젝트에서 하나의 프로젝트로 이동할 때 추가합니다.

이 효과를 원하지 않으시다면 이 요소를 제거하세요.

슬라이드에 제목을 추가하도록 요청합니다 <div class="carousel-item"> 각각에 <div class="carousel-caption"> 내부에

예제에 요소를 추가하여 각 슬라이드에 제목을 만들어 주세요:

<div class="carousel-item">
  <img src="beijing.jpg" alt="베이징">
  <div class="carousel-caption">
    <h3>베이징</h3>
    <p>감사합니다, 베이징!</p>
  </div>
</div>

직접 경험해보세요