【Bootstrap】画像のスライド表示を実装してみた【カルーセル】

Bootstrap
スポンサーリンク

こんにちは朱夏です。

今回はBootstrapを使って、画像のスライドを実装してみます。

参考サイトはこちらです。

 

いろんなサイトのトップページで見かけることが多いこの画像スライドは、Bootstrapの「カルーセル(carousel)」という機能を使うと簡単に実装できるようです。

早速タグを書いてみました。

コピペ用コード

 

冗長過ぎるくらいコメントで補足を入れてみました。
これを表示させるとこんな感じのイメージになります。

 

サンプルダウンロード

自分の使っているWordPressのテーマだと、投稿ページ上でカルーセル表示の再現が出来なかったので、サンプルファイルを置いておきました。


ダウンロード


※使用している画像は自分がキャンプに行った時に撮影したものです。

 

簡単でした
CSSもJavascriptも触らず、やっていることは以下の3ステップだけで済みました。
  1. body内にコードをコピペ
  2. スライド用の画像を用意
  3. 画像のリンクをつなげる

 

基本機能の実装を簡単に行い、細かなデザインは別途CSSなどで指定すれば、かなりの工数削減が見込めるのではと感じました。
今後使いそうなBootstrapの機能は、事前に勉強してタグをコピペできる様にまとめたいと思います。

今回は以上になります。

タイトルとURLをコピーしました