「Bootstrap 4」.carousel-controlでカルーセルのコントローラを利用するサンプル

2013年12月22日2021年1月24日

説明
.carousel-control-{prev|next}, .carousel-control-{prev|next}-icon は、左右の矢印アイコンを押すことでスライドする
使用例

<div id="demo" class="carousel slide" data-ride="carousel" style="width:400px">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="11.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="22.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="33.png" alt="Third slide">
    </div>
    <a class="carousel-control-prev" href="#demo" 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="#demo" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>