ブートストラップJSカルーセル

JSカルーセル（carousel.js）

カルーセルプラグインは、カルーセル（スライドショー）などの要素を循環するためのコンポーネントです。

カルーセルに関するチュートリアルについては、ブートストラップカルーセルチュートリアルをお読みください。

注：カルーセルは、Internet Explorer 9以前では適切にサポートされていません（スライド効果を実現するためにCSS3トランジションとアニメーションを使用しているため）。

カルーセルプラグインクラス

Class	Description
.carousel	Creates a carousel
.slide	Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect
.carousel-indicators	Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
.carousel-inner	Adds slides to the carousel
.icon-next	Unicode icon (arrow pointing right), used in carousels. This is often used instead of a glyphicon
.icon-prev	Unicode icon (arrow pointing left), used in carousels. This is often used instead of a glyphicon
.item	Specifies the content of each slide
.left carousel-control	Adds a left button to the carousel, which allows the user to go back between the slides
.right carousel-control	Adds a right button to the carousel, which allows the user to go forward between the slides
.carousel-caption	Specifies a caption for the carousel

データ経由-*属性

属性はdata-ride="carousel"カルーセルをアクティブにします。

data-slideand属性はdata-slide-to、移動するスライドを指定します。

この属性は、 prevまたは nextのdata-slide2つの値を受け入れ、数値を受け入れます。data-slide-to

例

<div id="myCarousel" class="carousel slide" data-ride="carousel">


<li data-target="#myCarousel" data-slide-to="1"></li>


<a class="left carousel-control" href="#myCarousel" data-slide="prev">

JavaScript経由

次のコマンドで手動で有効にします。

例

// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});

// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});

カルーセルオプション

オプションは、データ属性またはJavaScriptを介して渡すことができます。データ属性の場合、data-interval = ""のように、オプション名をdata-に追加します。

Name	Type	Default	Description
interval	number, or the boolean false	5000	Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding
pause	string, or the boolean false	"hover"	Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel Note: Set pause to false to stop the ability to pause on hover
wrap	boolean	true	Specifies whether the carousel should go through all slides continuously, or stop at the last slide true - cycle continuously false - stop at the last item

カルーセルメソッド

次の表に、使用可能なすべてのカルーセルメソッドを示します。

Method	Description	Try it
.carousel(options)	Activates the carousel with an option. See options above for valid values
.carousel("cycle")	Goes through the carousel items from left to right
.carousel("pause")	Stops the carousel from going through items
.carousel(number)	Goes to a specified item (zero-based: first item is 0, second item is 1, etc..)
.carousel("prev")	Goes to the previous item
.carousel("next")	Goes to the next item

カルーセルイベント

次の表に、利用可能なすべてのカルーセルイベントを示します。

Event	Description	Try it
slide.bs.carousel	Occurs when the carousel is about to slide from one item to another
slid.bs.carousel	Occurs when the carousel has finished sliding from one item to another

その他の例

スライドのキャプション

<div class="carousel-caption">それぞれの中に追加し<div class="item">て、各スライドのキャプションを作成します。

例

<div id="myCarousel" class="carousel slide" data-ride="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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>


<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
</div>


<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">Previous</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">Next</span>
</a>
</div>

❮ 前次 ❯

ブートストラップ3チュートリアル

ブートストラップグリッド

ブートストラップテーマ

ブートストラップの例

ブートストラップCSS参照

ブートストラップJSRef