Bootstrapを使ってみる。画像スライド編(Carousel)


Bootstrapを使ってみよう。画像スライド編(Carousel(カルーセル))

今回はBootstrapで用意されている、JavaScriptを使ったコンポーネント「Carousel(カルーセル)」を利用してみよう。
「Carousel(カルーセル)」は複数の画像をスライド表示してくれるもの。
インジケーターやコントローラーもセットされていてすぐに使うことができる!


Bootstrap


*この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。

Carousel(カルーセル)の利用方法

まずはBootstrapのサイトで用意されているカルーセルをみてみよう。
Bootstrapの上部メニューより「JavaScript」をクリックしてページ移動後、右サイドメニューから「Carousel」をクリック。
すると「Carousel」のExamplesが表示されている。

大まかに3つのクラス属性で作られている。

  • [class=”carousel-indicators”]=中央に配置されている3つの丸い目印。
  • [class=”carousel-inner”]=画像を配置する場所。div class=”item acitve“を付けたところが最初に表示される。
  • [class=”carousel-control”]=左右に付いている送りボタン。

その他

  • デフォルトのスライド時間は5秒。
  • 複数のCarouselを使うときはid変更を忘れずに。
  • 画像ホバー時に一時停止。

carousel

実際に画像を3枚用意して表示してみよう

画像を配置するためには[class=”carousel-inner”]の[img]タグに画像までのリンクを記述する。
captionもつけられるのでタイトルと説明をつけてみた。

作業はこれだけ。
サイトに合わせたサイズ変更などの微調整は必要かと思う。

画像のスライド時間変更について

その1
divにdata-interval=”秒”を加えるだけ。

その2
jsフォルダにある「bootstrap.js」に変更を加える。
intervalの数値を変更する。デフォルトは5秒となっている。



デモサイトを見る
PC表示右側、スマホ表示下側のスライド時間を2.5秒に変更。
carousel


この投稿へのコメント

  1. こじ said on 2016年5月5日 at 12:12 AM

    サイズ、アスペクト比の異なる画像を複数指定した時に、スライド自体のサイズが画像によって変わってしまいます。
    固定サイズで、画像を中央に表示する方法はありませんか?

    • MizuKazu said on 2016年5月5日 at 7:53 PM

      こんにちは。

      他にもやり方あると思いますが今思いつくところで。
      デバイス固定ということなら、高さを指定してやるのがいいのかもしれません。
      .item へ height:600px を指定したなら、同時にカルーセル内の img へ min-height:100%、もしくは .item と同じ数値、この場合 600px を与えます。
      レスポンシブ対応ということならメディアクエリにてそれぞれ指定します。

      .carousel .item {
      height: 600px;
      background-color: #777;
      }
      .carousel-inner > .item > img {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      min-height: 100%;
      width: 100%;
      }

      http://mizukazu.16mb.com/carousel0505/carousel.html

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL