1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. 【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によるカルーセルの実装方法でした。

スポンサードリンク

関連コンテンツ

オススメ記事

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

scratch

小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるプログラミング入門です。 前回の記事で、プログラミングってどういうものなのか何となく理解してもらえたでしょうか? 少しだけScratch(スクラッチ)についてもふれましたが、ま

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

小学生から始めるプログラミング入門。プログラミングってなぁに?

2020年から小学校でプログラミングが必修(ひっしゅう)となりますが、「プログラミングなんてやったことないし、何から初めていいのか分からない」といった方も多いのではないでしょうか。 プログラミン

コメントをどうぞ!

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