bootstrapに標準で装備されている写真をスライドして見せることができるコンポーネント、カルーセルの簡単な実装方法とカスタマイズを記述します。
すごく簡単に使い勝手の良いスライダーが実装できるのでぜひ試してみてください。
HTML
自動再生の設定
カルーセルのID指定のある一番外側の<div>要素にdata-ride="carousel"を入れると自動的にスライドが開始されるます。
インターバルの設定
カルーセルのID指定のある一番外側の<div>要素にdata-interval="3000"を入れると切り替わるタイミングが変わります。 3000で3秒のタイミングで切り替わります。
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- data-ride="carousel"を入れると自動的にスライドが開始される -->
<!-- data-interval="3000"を入れると切り替わるタイミングが変わる（3000で3秒） -->
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- ○の表示 -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1" class=""></li>
<li data-target="#carousel" data-slide-to="2" class=""></li>
</ol>
<!-- スライドの中身 -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="images/img1.jpg" alt="thumb">
<div class="carousel-caption">写真1のコメント</div>
</div>
<div class="item">
<img class="img-responsive" src="images/img2.jpg" alt="thumb">
<div class="carousel-caption">写真2のコメント</div>
</div>
<div class="item">
<img class="img-responsive" src="images/img3.jpg" alt="thumb">
<div class="carousel-caption">写真3のコメント</div>
</div>
</div>
<!-- 左右のページ送り -->
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
CSS
スタイルシートの追加
bootstrapはcontainerクラスで囲むと、横幅がデフォルトで1140pxのになり、 何もカスタマイズしなければカルーセルの横幅も1140pxになります。
そこで横幅をカスタマイズする場合は、スタイルの記述を追加します。
.carouselのクラスの横幅を指定、その中のimg要素の横幅を100%にしてあげると、 任意の横幅になります。
<link rel="stylesheet" href="../common/css/bootstrap.css">
<style type="text/css">
.carousel{
width:100%; /*サイズ指定*/
margin:auto;
}
.carousel img{
width:100%;
}
</style>
JavaScript
JavaScriptは下記のファイルを読み込むだけです。
<script src="../common/js/jquery-1.11.3.min.js"></script> <script src="../common/js/bootstrap.js"></script>
参照サイト：
