Carousel

画像などのコンテンツをスムーズに横スライド表示（自動・手動）します。
ホームページのトップ画面などで、コンテンツ紹介や商品紹介をするためによく使われています。
ここではBootstrap標準Carouselの説明を行いますが、Webで検索すると様々なCarouselがありますので自分の用途に合ったものを使いましょう。

Carouselを表示する

コーディング

　1行目
　　Carouselの指定を行います。
　　idには表示するCarouselの識別名を記述するので、ページ内に複数のCarouselがある場合には変更してください。
　2-5行目
　　下部に表示されている ○ を表示します。
　　.carousel-innerに記述されている画像に対応するので数を合わせてください。
　　data-slide-toに0から始まる連番を記述してください。　この番号を元に.carousel-innerで記述されている画像を表示します。
　　.activeを指定すると指定された位置の○が●表示されます。
　6-13行目
　　表示画像を指定します。
　　.activeを指定すると指定された画像から表示されます。
　14-19行目
　　画像スライド用のボタンを表示します。　特に変更することはありません。

Carouselの画像に説明文等を表示する

コーディング

　4-7行目
　　.item内に.carousel-captionを記述すると、画像下部に説明文などを表示することができます。
　　文字表示系のタグが使えますので、ヘッダ・説明文などを記述してください。

Carouselのスライドまでの時間を変更する

コーディング

　3-5行目
　　時間を変更するCarouselのintervalに時間をミリ秒（上記では2秒に設定）でセットします。
　　上2つのCarouselと比べるとスライドまでの時間が早くなっているのがわかります。

Carouselでのメモや注意点など

使用上の注意点など

以下の点に気をつけて作成してください。

  • 同一ページ内に複数のCarouselを設置する場合には、各Carouselのidに気をつけること。
    コピペしてidを変更し忘れて正しく動かないというのはよくあります。
  • Carouselは表示幅を自動的に調整してくれるので小さい画像などを別途用意する必要はありません。
    なのでウィンドウの幅を変更したりスマートフォン等の小さい画面で表示させる場合でも、特に意識して記述する必要はありません。
    下のCarouselは２分割したエリアに2つのCarouselを記述しています。
  • Carouselで表示する画像の表示サイズは合わせること。
    画像サイズを合わせなくても表示幅を自動的に調整してくれますが、Carouselの下に表示しているコンテンツが上下するので見た目がよくありません。
    （右下のCarousel表示のようになってしまいます）