bootstrap カルーセル

bootstrap カルーセルを少しカスタマイズする方法

bootstrap カルーセル

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>

デモはこちら

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

参照サイト:

http://www.wivern.com/bootstrap/javascript.html#carousel

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です