English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 基礎トレーニング

Bootstrap プラグイン

Bootstrap カルーセル（Carousel）プラグイン

Bootstrap カルーセル（Carousel）プラグインは、サイトにスライダーを柔軟に追加する方法です。さらに、内容も柔軟で、画像、内嵌フレーム、ビデオ、または他のどの種類のコンテンツでも配置できます。

プラグインの機能を単独で参照したい場合は、以下を参照してください。 carousel.js。または、以下のように Bootstrap 插件概要 第1章に記載されているように、以下を参照できます。 bootstrap.js または圧縮版の bootstrap.min.js。

オンラインサンプル

以下はシンプルなスライドで、Bootstrap カルーセル（Carousel）プラグインを使用して、ループ再生要素の一般的なコンポーネントを表示しています。カルーセルを実装するには、このタグを持つコードを追加するだけで十分です。data属性を使用する必要はなく、クラスベースのシンプルな開発のみです。

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　シンプルなカルーセル（Carousel）プラグイン</title>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!--　スライドショー（Carousel）インジケータ　-->
	<ol　class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0"　class="active"></li>
		<li　data-target="#myCarousel"　data-slide-to="1></li>
		<li　data-target="#myCarousel"　data-slide-to="2></li>
	</ol>　　　
	<!--　スライドショー（Carousel）項目　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/run/images/slide1.png"　alt="First　slide">
		</div>
		<div　class="item">
			<img　src="/run/images/slide2.png"　alt="Second　slide">
		</div>
		<div　class="item">
			<img　src="/run/images/slide3.png"　alt="Third　slide">
		</div>
	</div>
	<!--　スライドショー（Carousel）ナビゲーション　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
		<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true"></span>
		<span　class="sr-only">前の</span>
	</a>
	<a　class="right　carousel-control"　href="#myCarousel"　role="button"　data-slide="next">
		<span　class="glyphicon　glyphicon-chevron-right"　aria-hidden="true"></span>
		<span　class="sr-only">次の</span>
	</a>
</div>　
</body>
</html>
テストをしてみる ‹/›

以下の結果が表示されます：

オプションのタイトル

オプションのタイトルを通じて .item 内の .carousel-キャプション 要素はスライドにタイトルを追加します。ここに任意のHTMLを配置するだけで、自動的に整列およびフォーマットされます。以下の例がその点を示しています：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　カルーセル（Carousel）プラグインのタイトル</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!--　スライドショー（Carousel）インジケータ　-->
	<ol　class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0"　class="active"></li>
		<li　data-target="#myCarousel"　data-slide-to="1></li>
		<li　data-target="#myCarousel"　data-slide-to="2></li>
	</ol>　　　
	<!--　スライドショー（Carousel）項目　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/run/images/slide1.png"　alt="First　slide">
			<div　class="carousel-キャプション　1</div>
		</div>
		<div　class="item">
			<img　src="/run/images/slide2.png"　alt="Second　slide">
			<div　class="carousel-キャプション　2</div>
		</div>
		<div　class="item">
			<img　src="/run/images/slide3.png"　alt="Third　slide">
			<div　class="carousel-キャプション　3</div>
		</div>
	</div>
	<!--　スライドショー（Carousel）ナビゲーション　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
	　　　　<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true"></span>
	　　　　<span　class="sr-only">前の</span>
	</a>
	<a　class="right　carousel-control"　href="#myCarousel"　role="button"　data-slide="next">
	　　　　<span　class="glyphicon　glyphicon-chevron-right"　aria-hidden="true"></span>
	　　　　<span　class="sr-only">次の</span>
	</a>
</div>　
</body>
</html>
テストをしてみる ‹/›

以下の結果が表示されます：


使い方

  • data属性を通じて：data属性を使用すると、カルーセル（Carousel）の位置を簡単に制御できます。

    • 属性 data-slide キーワード prev または next、スライドの現在位置に対する位置を変更するために使用されます。

    • 使用 data-slide-to オリジナルのスライドインデックスをカルーセルに渡します。data-slide-to="2" スライダーを特定のインデックスに移動します。インデックスは0から数えます。

    • data-ride="carousel" 属性は、ページが読み込まれたときにループをアニメーション開始するために使用されます。

  • JavaScriptを使って：ループ（Carousel）は以下のようにJavaScriptで手動で呼び出すことができます：

    $('.carousel').carousel()

オプション

一部のオプションはdata属性やJavaScriptで渡されます。以下の表にそのオプションを示します：

オプション名タイプ/デフォルト値Data 属性名説明
intervalnumber
デフォルト値：5000		data-interval各項目間の遅延時間量を自動的にループします。falseの場合、ループは自動的にループしません。
pausestring
デフォルト値："hover"		data-pauseマウスが乗るとループを一時停止し、マウスが離れたらループを再開します。
wrapboolean
デフォルト値：true		data-wrapループが連続してループするかどうか。

メソッド

以下は、ループ（Carousel）プラグインに有用なメソッドです：

メソッド説明サンプル
.carousel(options)オプションのオブジェクトを初期化し、ループを開始します。
$('#identifier').carousel({
　　　　interval:　2000
})
.carousel('cycle')左から右にループして移動します。
$('#identifier').carousel('cycle')
.carousel('pause')ループを停止します。
$('#identifier').carousel('pause')
.carousel(number)特定のフレーム（0から始まる、配列と同様に）にループして移動します。
$('#identifier').carousel(number)
.carousel('prev')前の項目にループして移動します。
$('#identifier').carousel('prev')
.carousel('next')次の項目にループして移動します。
$('#identifier').carousel('next')

オンラインサンプル

以下の例では、メソッドの使用法を示します：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　ループ（Carousel）プラグインメソッド</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!--　スライドショー（Carousel）インジケータ　-->
	<ol　class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0"　class="active"></li>
		<li　data-target="#myCarousel"　data-slide-to="1></li>
		<li　data-target="#myCarousel"　data-slide-to="2></li>
	</ol>　　　
	<!--　スライドショー（Carousel）項目　-->
	<div　class="carousel-inner">
		<div　class="item　active">
		<img　src="/run/images/slide1.png"　alt="First　slide">
		</div>
		<div　class="item">
		<img　src="/run/images/slide2.png"　alt="Second　slide">
		</div>
		<div　class="item">
		<img　src="/run/images/slide3.png"　alt="Third　slide">
		</div>
	</div>
	<!--　スライドショー（Carousel）ナビゲーション　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
	　　　　<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true"></span>
	　　　　<span　class="sr-only">前の</span>
	</a>
	<a　class="right　carousel-control"　href="#myCarousel"　role="button"　data-slide="next">
	　　　　<span　class="glyphicon　glyphicon-chevron-right"　aria-hidden="true"></span>
	　　　　<span　class="sr-only">次の</span>
	</a>
</div>
<!--　控制按钮　-->
<div　style="text-align:center;">
	<input　type="button"　class="btn　start-slide"　value="Start">
	
	
	
	テストをしてみる ‹/›

以下の結果が表示されます：


イベント

以下の表は、カルーセル（Carousel）プラグインで使用されるイベントを示しています。これらのイベントは、関数内でフックとして使用できます。

イベント説明サンプル
slide.bs.carouselslide サンプルメソッドを呼び出したときにすぐにこのイベントがトリガーされます。
$('#identifier').on('slide.bs.carousel', function () {
　　　　//　特定のアクションを実行します...
})
slid.bs.carouselスライドショーが幻灯片の遷移効果を完了したときにこのイベントがトリガーされます。
$('#identifier').on('slid.bs.carousel', function () {
　　　　//　特定のアクションを実行します...
})

オンラインサンプル

以下のサンプルは、イベントの使用法を示しています：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　スライドショー（Carousel）プラグインイベント</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!--　スライドショー（Carousel）インジケータ　-->
	<ol　class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0"　
			class="active"></li>
		<li　data-target="#myCarousel"　data-slide-to="1></li>
		<li　data-target="#myCarousel"　data-slide-to="2></li>
	</ol>　　　
	<!--　スライドショー（Carousel）項目　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/run/images/slide1.png"　alt="First　slide">
		</div>
		<div　class="item">
			<img　src="/run/images/slide2.png"　alt="Second　slide">
		</div>
		<div　class="item">
			<img　src="/run/images/slide3.png"　alt="Third　slide">
		</div>
	</div>
	<!--　スライドショー（Carousel）ナビゲーション　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
	　　　　<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true"></span>
	　　　　<span　class="sr-only">前の</span>
	</a>
	<a　class="right　carousel-control"　href="#myCarousel"　role="button"　data-slide="next">
	　　　　<span　class="glyphicon　glyphicon-chevron-right"　aria-hidden="true"></span>
	　　　　<span　class="sr-only">次の</span>
	</a>
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("slide サンプルメソッドが呼び出されたときに即座にこのイベントがトリガーされます。");
		});
	});
</script>
</body>
</html>
テストをしてみる ‹/›

以下の結果が表示されます：

Bootstrap HTML コーディング規範Bootstrap フェードインプラグイン