【初心者の方向け】 Bootstrap4の使い方 カルーセル

Bootstrapでカルーセルを扱うこともできます。

カルーセルとは、スライドやスライドショーなどとも呼ばれ、ひとつの領域に視覚的に訴えることのできるコンテンツを複数表示を可能にできるものです。TOPページに使われる事が多く、シンプルな動作でありながら見た目的にも良く、デザインの幅も広がるかと思います。

今回は、カルーセルの基本的な設置方法になります。

Bootstrap4のバージョン4.3をベースに書いています。

基本的なカルーセル

スライドのみになります。サンプルでは画像が左から右へスライドされるのが確認できます。

サンプルコードになります。

スライドをおこなう要素のひとつには必ず.activeクラスを追加してください。こちらが無いとカルーセルが動作しません。

また各要素には.d-block(display-block)と.w-100(width=”100%”)を指定してください。

<div id="carouselsample-1" 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-fadeクラスを追加する事により、フェードでの表示になります。

サンプルコード

<div id="carouselsample-2" class="carousel slide carousel-fade" 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>

コントロールの表示

カルーセルの前後の切り替えをする為のコントロールの表示になります。
サンプルでは要素の左右に矢印が表示されます。

Previous



Next

サンプルコード

.carousel要素内に.carousel-control-prevまたは.carousel-control-nextを追加します。

<div id="carouselsample-3" 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>
  <a class="carousel-control-prev" href="#carouselsample-3" 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="#carouselsample-3" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

インジケーターの表示

カルーセルにコントロールとインジケーターをつけます。
インジケーターにはサムネイル画像などを表示することもできますが、応用的な使い方に関しては別の機会で書きます。

Previous



Next

サンプルコード

<div id="carouselsample-4" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselsample-4" data-slide-to="0" class="active"></li>
    <li data-target="#carouselsample-4" data-slide-to="1"></li>
    <li data-target="#carouselsample-4" data-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselsample-4" 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="#carouselsample-4" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

キャプションを表示

カルーセル内にキャプション（見出し）を入れることもできます。

.carousel-innerの各アイテム内に、.carousel-captionクラスを追加します。

<div class=”carousel-item”>

<img・・・>

<div class=”carousel-caption”>

キャプション用テキスト

</div><!—End carousel-caption->

</div><!—End carousel-item->

見出し１

これは見出し１です

見出し２

これは見出し２です

見出し３

これは見出し３です

 

 

サンプルコード

 

サンプルでは、画面幅に関係なくキャプションを表示させていますが、キャプションのテキスト内容が多い場合、スマホなどで表示される際に、レイアウトが崩れてしまいます。

その際、.carousel-captionに.d-done .d-md-blockなど追加する事により、画面幅の小さいデバイスで見られた場合にキャプションを隠すこともできます、

 

<div id="carouselsample-5" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption"> 
        <h3>見出し１</h3>
        <p>これは見出し１です</p>
        </div>
    </div>
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption"> 
        <h3>見出し２</h3>
        <p>これは見出し２です</p>
        </div>
    </div>
     <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption"> 
        <h3>見出し３</h3>
        <p>これは見出し３です</p>
        </div>
    </div>
  </div>
</div>

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。


応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B

関連記事

サイト移転時の変更内容をGoogleに知らせる方法

2025/01/09

ブログやホームページのアドレス・ドメインを変更した際に、サイト変更内容をいち早くGoogleに知らせる方法の簡易的な説明になります。 サイトのドメインを変更した...

【OCLP】公式サポートが終了したMacに最新のOS「sonoma」をインストール

2024/08/02

　公式サポートの終了した古いMacに最新のmacOSを導入することができる「OpenCore Legacy Patcher（OCLP）」を利用してみました。今回...

メタタグを使用して簡単にリダイレクト（301）設定する方法

2024/05/23

サイトのドメイン変更時、なんらかの理由で公開時のアドレスと異なる記事へ移転や変更をした際に、訪れたユーザーを指定したURLへ転送するリダイレクト機能について。古...

WordPressでカスタム投稿に投稿する際に、アイキャッチを設定していなければ自動で設定させる方法

2024/05/20

ワードプレスのアイキャッチの設定をしなかった場合でも、投稿時に自動で設定してくれる方法です。   functions.php function def...

別のワードプレスへ記事移行の際に画像もエクスポートしてくれるプラグイン

2024/05/16

ワードプレスの記事をエクスポートする際に、デフォルトの状態ではメディア（添付ファイル）は含まれません。「Export media with selected c...