1. HOME»
  2. プログラミング・Web»
  3. Bootstrap»
  4. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。

サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。
Bootstrap4には、カルーセルを実装する為の機能が備わっています。

今回はその機能を使って、カルーセルを作ってみたいと思います。

目次
  1. カルーセルとは
  2. カルーセルの作り方の基本
  3. スライドさせる矢印を作る
  4. スライドを切り替える為のバーを表示する
  5. キャプションを表示する
  6. クロスフェード
  7. オプションを使う
  8. まとめ

カルーセルとは

ではまず、カルーセルとはどういったものなのでしょうか。
Webサイトを見ていると、たまに下のようなナビゲーションを見かけます。
カルーセル

左右の矢印をクリックすると、くるくると回転するようにスライドしていくものです。

カルーセルの作り方の基本

ではBootstrap4でカルーセルを作ってみましょう。
基本的なコードは以下の通りです。

<div id="carousel-example" class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" src="img/carousel-slideA.jpg" alt="スライドA">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideB.jpg" alt="スライドB">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideC.jpg" alt="スライドC">
		</div>
	</div>
</div>

1行目のidは、同ページ内に複数のカルーセルがある場合、他と被らないようにします。
3行目、6行目、9行目のcarousel-itemには、どれか一つに必ずactiveを指定します。

下のサンプルは、一定の間隔でスライドします。

スライドさせる矢印を作る

先ほどの例では一定間隔でスライドしましたが、そこに見たい情報があったとき、自分のタイミングで進めたり戻したりしたいです。
そこで矢印を作って、スライドを操作できるようにしてみましょう。

<div id="carousel-example" class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" src="img/carousel-slideA.jpg" alt="スライドA">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideB.jpg" alt="スライドB">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideC.jpg" alt="スライドC">
		</div>
	</div>
</div>
<a class="carousel-control-prev" href="#carousel-example" 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="#carousel-example" role="button" data-slide="next">
	<span class="carousel-control-next-icon" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
</a>

下のサンプルは、一定の間隔でスライドし、左右矢印のクリックにより手動でもスライドします。

スライドを切り替える為のバーを表示する

矢印ではなく、カルーセルの下部にバーを表示し、それをクリックすることでスライドさせることもできます。

<div class="carousel-inner">
	<div class="carousel-item active">
		<img class="d-block w-100" src="img/carousel-slideA.jpg" alt="スライドA">
	</div>
	<div class="carousel-item">
		<img class="d-block w-100" src="img/carousel-slideB.jpg" alt="スライドB">
	</div>
	<div class="carousel-item">
		<img class="d-block w-100" src="img/carousel-slideC.jpg" alt="スライドC">
	</div>
</div>
<ol class="carousel-indicators">
	<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
	<li data-target="#carousel-example" data-slide-to="1"></li>
	<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>

下のサンプルは、一定の速度でスライドし、下部のバーをクリックすることでもスライドさせることができます。

キャプションを表示する

カルーセル上にキャプションを表示させることもできます。

<div id="carousel-example" class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" src="img/carousel-slideA.jpg" alt="スライドA">
			<div class="carousel-caption d-none d-md-block">
				<h5>スライドA</h5>
				<p>こちらはスライドAです。</p>
			</div>
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideB.jpg" alt="スライドB">
			<div class="carousel-caption d-none d-md-block">
				<h5>スライドB</h5>
				<p>こちらはスライドBです。</p>
			</div>
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideC.jpg" alt="スライドC">
			<div class="carousel-caption d-none d-md-block">
				<h5>スライドC</h5>
				<p>こちらはスライドCです。</p>
			</div>
		</div>
	</div>
</div>

上のサンプルでは、一応キャプションを表示していますが、カルーセルのサイズが小さいとキャプションが表示されません
そのままの状態だと、ブログのレイアウト上、キャプションが表示されていない可能性があります
もし表示されていない場合、ブラウザのサイズを変更すると、表示される場合があります

クロスフェード

スライドではなく、クロスフェードを使うこともできます。

<div id="carousel-example" class="carousel slide carousel-fade" data-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" src="img/carousel-slideA.jpg" alt="スライドA">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideB.jpg" alt="スライドB">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideC.jpg" alt="スライドC">
		</div>
	</div>
</div>

一定の間隔でクロスフェードにより、内容が切り替わります。

オプションを使う

また、いくつかオプションもありますので、紹介します。
オプションは、data-○○という形で一番外側のdivタグに指定します。○○の部分に以下で紹介するオプション名を入れます。

名前 機能 初期値 タイプ
interval スライドの間隔 5000 数値
keyboard キーボードに対応するか true ブーリアン
pause マウスを置いた時に一時停止するかどうか。falseにすると一時停止しない hover 文字列、ブーリアン
ride 自動で回転するかどうか false 文字列
wrap カルーセルが回転するかしないか true ブーリアン

<div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="1000">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" src="img/carousel-slideA.jpg" alt="スライドA">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideB.jpg" alt="スライドB">
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="img/carousel-slideC.jpg" alt="スライドC">
		</div>
	</div>
</div>

この例では1行目にdata-interval="1000"と指定しています。
これにより、1秒ごとにスライドするようになります。

まとめ

Webサイトを見ているとたまに見かけるカルーセル機能ですが、Bootstrap4を使うととても簡単に実装することができます。
Bootstrapを使ってサイトを運営している方で、カルーセルが欲しいなと思ったらぜひ使ってみてください。

そんなわけで、Bootstrap4によるカルーセルの実装方法でした。

このシリーズの一覧はこちら

  1. Bootstrap5を読み込む為の方法を徹底解説
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!
オリジナルゲーム.com