Bootstrap カルーセル

昨日のレッスンは、今作っているWPのオリジナルサイトにBootstrapを実装し、カルーセルを入れてみました。

カルーセルとは・・
イメージなどのコンテンツを横方向にスライドさせながら順番に表示すること

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

.carousel.slide  カルーセル全体
data-ride="carousel" を指定すると画面を読み込んだ時点でスライドを開始。デフォルトで 5秒毎にスライド。マウスを乗せている時はスライドしない。
.carousel-inner  カルーセルの内部コンテンツセット
.carousel-item  画像を配置する場所
.active  最初に表示される。

https://getbootstrap.com/docs/4.3/components/carousel/

カルーセルを挿入する場所を確認するには・・
サイトの検証で場所を確認する。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です