2018-04-28
2019-10-08
Bootstrap4で画像スライダーを実現!コピペで動くサンプル付き

最近のサイトでは、サイトTopへ動画やアニメーションの画像を設定しているサイトが増加しています。
Bootstrap4でもレシポンシブに対応した画像のスライダーを実現することが可能なので、今回はBootstrap4の画像スライダーの実現方法を解説します。
なお、Bootstrap4では画像スライダーをカルーセルという名称で設定している為、クラスの名前などもcarouselという名称を利用しています。
※ Internet Explorer 9以前ではサポート対象外のため、動作しません。
Bootstrap4の画像スライダーサンプルコード
以下のソースをhtmlファイルに貼り付けて、そのまま展開すれば起動します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrapでのナビゲーションバー設定</title> <!--CSS --> <!-- 必要なメタタグ --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> /*サンプルコードの縦横幅の設定画像スライダーには関係なし*/ body { height: 800px; width: 800px; } .auto { margin: auto; } </style> </head> <body> <div class="auto"> <!--data-intervalの秒数を変更すると、自動スライドの時間も変更される--> <!--ID carousel-example-genericで全体を囲み、ページ内リンクの設定を行う--> <!--data-ride="carousel"で即座にアニメーションの開始--> <div id="carousel-sample" class="carousel slide" data-interval=1000 data-ride="carousel"> <!-- 以下は画像下部の■ ■ ■の部分の設定--> <!-- class="active"で初期に表示される画像を設定している--> <ol class="carousel-indicators"> <li data-target="#carousel-sample" data-slide-to="0" class="active"></li> <li data-target="#carousel-sample" data-slide-to="1"></li> <li data-target="#carousel-sample" data-slide-to="2"></li> </ol> <!--画像スライドの中身--> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-75" src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample1.jpeg" alt="1枚目"> <div class="carousel-caption d-none d-md-block"> <h5>トランプ大統領</h5> <p>酒もタバコもいらない</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample2.jpeg" alt="2枚目"> <div class="carousel-caption d-none d-md-block"> <h5>ヒラリー・クリントン</h5> <p>甥っ子がイケメン</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample3.jpeg" alt="3枚目"> </div> </div> <!-- 左 右の矢印の設定 --> <a class="carousel-control-prev" href="#carousel-sample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">戻る</span> </a> <a class="carousel-control-next" href="#carousel-sample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">次へ</span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
スライド時間を変更する
以下のdata-intervalの数値が画像スライドの時間なので、増加減するとスライドの時間が変更されます。
<!--data-ride="carousel"で即座にアニメーションの開始--> <div id="carousel-sample" class="carousel slide" data-interval=1000 data-ride="carousel">
data-rideをfalseにすると、ユーザーが矢印を選択しないと自動遷移しないようになります。
data-ride="false"
画像の大きさを変更する
以下で画像の横幅を75%に指定しています。
<img class="d-block w-75" src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample1.jpeg" alt="1枚目">
w-75はBootstrap4で用意されている横幅、縦幅の%を指定するクラスで、その他以下が用意されています。
w-25、w-50、w-75、w-100
h-25、h-50、h-75、h-100
画像の説明について
carousel-captionクラス配下にh1やpタグを設定することで 画像の説明を表示する事ができます。
<div class="carousel-caption d-none d-md-block"> <h5>トランプ大統領</h5> <p>酒もタバコもいらない</p> </div>
その他の解説については、コード内のコメントをご覧ください
関連記事
Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き
Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き
Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き
Ruby on RailsでSassを活用し、CSS作成を高速・効率化する
あなたにお勧めの記事
前の記事
2018/04/27
次の記事
2018/05/02