carousel

bootstrap5.css

bootstrap5.css
.carousel {
  position: relative;
}
bootstrap5.css
.carousel.pointer-event {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
bootstrap5.css
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
bootstrap5.css
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}
bootstrap5.css
.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}
bootstrap5.css
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}
bootstrap5.css
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
bootstrap5.css
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
bootstrap5.css
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}
bootstrap5.css
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1;
}
bootstrap5.css
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: 0s 0.6s opacity;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}
bootstrap5.css
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}
bootstrap5.css
.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}
bootstrap5.css
.carousel-control-prev {
  left: 0;
}
bootstrap5.css
.carousel-control-next {
  right: 0;
}
bootstrap5.css
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%;
}
bootstrap5.css
.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}
bootstrap5.css
.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}
bootstrap5.css
.carousel-indicators .active {
  opacity: 1;
}
bootstrap5.css
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

html bootstrap5 Sample

カルーセル基本的な使用例：carouselとcarousel-innerとcarousel-item

First slide
Second slide
Third slide 
  <div class="container">
    <!-- 複数の画像を用意して、回転木馬のように自動で切り替えていく -->
    <!-- slideさせていく -->
    <div class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" alt="First slide"
            src="https://via.placeholder.com/1600x900/FFFF00/000000?text=First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" alt="Second slide"
            src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" alt="Third slide"
            src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Third slide">
        </div>
      </div>
    </div>
  </div>

インジケータ、タイトル、キャプション付きカルーセル：carousel-indicatorsとcarousel-control-prev

  <div id="carouselSample" class="carousel slide" data-ride="carousel">
    <!-- インジケーターによるフェード遷移（好きな場所にクリックでいける） -->
    <ol class="carousel-indicators">
      <li data-target="#carouselSample" data-slide-to="0" class="active"></li>
      <li data-target="#carouselSample" data-slide-to="1"></li>
      <li data-target="#carouselSample" data-slide-to="2"></li>
    </ol>
    <!-- カルーセル部分 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" slide"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" alt="img"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" alt="img"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
    </div>
    <!-- コントローラー部分 -->
    <!-- 前と次のアイコン付きカルーセル -->
    <a class="carousel-control-prev" href="#carouselSample" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">前に戻る</span>
    </a>
    <a class="carousel-control-next" href="#carouselSample" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">次に送る</span>
    </a>
  </div>

カルーセルのJSイベント：slid.bs.carousel

  <div class="container">
    <div id="carouselExample" class="carousel slide">
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
      </div>
      <!-- コントローラー部分 -->
      <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>
  <script>
    $('#carouselExample').on('slide.bs.carousel', function () {
      $('#carouselExample .carousel-caption').hide();
    });
    $('#carouselExample').on('slid.bs.carousel', function () {
      $('#carouselExample .carousel-caption').show();
    });
  </script>

カルーセルをJavaScript経由で呼び出す

  <div class="container">
    <div id="carouselExample2" class="carousel slide">
      <!-- data-ride="carousel"は不要 -->
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル１</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル２</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル３</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>
  <script>
    $(function () {
      $('#carouselExample2').carousel();
    });
  </script>

コントローラー付きカルーセルJS：carousel

  <div class="container">
    <div id="carousel" class="carousel slide">
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active">
          <img class="d-block w-100" alt="First slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
        </div>
        <!-- Second slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Second slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
        </div>
        <!-- Third slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Third slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
    <!-- コントロールボタン -->
    <div class="control-buttons my-3">
      <input type="button" class="btn btn-primary start-slide" value="開始">
      <input type="button" class="btn btn-primary pause-slide" value="停止">
      <input type="button" class="btn btn-primary prev-slide" value="前へ">
      <input type="button" class="btn btn-primary next-slide" value="次へ">
      <input type="button" class="btn btn-primary slide-first" value="第1スライドに">
      <input type="button" class="btn btn-primary slide-second" value="第2スライドに">
      <input type="button" class="btn btn-primary slide-third" value="第3スライドに">
    </div>
  </div>
  <script>
    $(function () {
      // 循環開始
      $(".start-slide").on('click', function () {
        $("#carousel").carousel('cycle');
      });
      // 一時停止
      $(".pause-slide").on('click', function () {
        $("#carousel").carousel('pause');
      });
      // 前へ循環
      $(".prev-slide").on('click', function () {
        $("#carousel").carousel('prev');
      });
      // 次へ循環
      $(".next-slide").on('click', function () {
        $("#carousel").carousel('next');
      });
      // 特定のフレームに循環
      $(".slide-first").on('click', function () {
        $("#carousel").carousel(0);
      });
      $(".slide-second").on('click', function () {
        $("#carousel").carousel(1);
      });
      $(".slide-third").on('click', function () {
        $("#carousel").carousel(2);
      });
    });
  </script>

データ属性でオプションを指定：data-interval

  <div class="container">
    <!-- intervalの設定 -->
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000">
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>