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

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

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  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、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

MacにPythonをインストールしてみよう!小学生からのPython入門

さて、今回《こんかい》もプログラミングを学んでいきましょう! 前回はWindows《ウィンドウズ》にPython《パイソン》をインストールする方法《ほうほう》を紹介《しょうかい》しました。今回

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

【Unity】開発したiOSゲームをiPhoneで実機テストする方法

こんにちは。現在、最新ゲーム熱意製作中の@It_is_Rです。個人での開発はとても大変で、時間がかかってしまっていますが、すこしずつ形にしていっています。 さて、今回はUnityで開発したiO

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

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

M1 Mac対応。DockerでWordPress開発環境を構築する方法

みなさんこんにちは。@It_is_Rです。 ローカルにWordPressの開発環境を作りたいとき、Dockerを使うと、とても簡単に構築することができます。しかし、実際に運営しているWordP

npm-scriptsの使い方。自作のコマンドによるタスク実行方法

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。 npm-scriptsを使うことで、あらかじめタスクをかんたんな名前で指定しておき、そのタスクを素早く実行できるように

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

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

コメントを残す(コメントは承認後に反映されます)

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