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

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

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によるカルーセルの実装方法でした。

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短く

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

コメントをどうぞ!

メールアドレスが公開されることはありません。