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

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

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

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

カルーセルとは

ではまず、カルーセルとはどういったものなのでしょうか。
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>

１行目のidは、同ページ内に複数のカルーセルがある場合、他と被らないようにします。
３行目、６行目、９行目の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タグに指定します。○○の部分に以下で紹介するオプション名を入れます。

例

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

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

まとめ

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、カルーセル機能のを実装方法！

• Tweet
• Facebook
• はてブ
• Pocket