2018-04-28

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

最近のサイトでは、サイトTopへ動画やアニメーションの画像を設定しているサイトが増加しています。

Bootstrapでもレシポンシブに対応した画像のスライダーを実現することが可能なので、今回はBootstrapの画像スライダーの実現方法を解説します。

なお、Bootstrapでは画像スライダーをカルーセルという名称で設定している為、クラスの名前などもcarouselという名称を利用しています。

※ Internet Explorer 9以前ではサポート対象外のため、動作しません。

Bootstrapの画像スライダーサンプルコード

以下のソースをhtmlファイルに貼り付けて、そのまま展開すれば起動します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>テストスライダー</title>

    <!--CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <style>

        /*imgの大きさを設定するクラス heightを指定しないと次へのボタンの位置が変わる */
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            margin: auto;
            height: 300px;
        }

    </style>
</head>

<body>
<!--data-intervalの秒数を変更すると、自動スライドの時間も変更される-->
<!--ID carousel-example-genericで全体を囲み、ページ内リンクの設定を行う-->
<!--data-ride="carousel"で即座にアニメーションの開始-->
<div id="carousel-sample" class="carousel slide" data-ride="carousel" data-interval="400">
    <!-- 以下は画像下部の○○○の部分の設定-->
    <!-- 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" role="listbox">
        <div class="item active">
            <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample1.jpeg" alt="...">
            <div class="carousel-caption">
                  <!--画像の説明 -->
                <h1>トランプ大統領</h1>
                <p>実は酒タバコは一切やらない</p>
            </div>
        </div>
        <div class="item">
            <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample2.jpeg" alt="...">
            <div class="carousel-caption">

            </div>
        </div>

        <div class="item">
            <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample3.jpeg" alt="...">
            <div class="carousel-caption">

            </div>
        </div>

    </div>

    <!-- 左 右の矢印の設定 -->
    <a class="left carousel-control" href="#carousel-sample" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">戻る</span>
    </a>
    <a class="right carousel-control" href="#carousel-sample" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">次へ</span>
    </a>
</div>

</body>
</html>

スライド時間を変更する

以下のdata-intervalの数値が画像スライドの時間なので、増加減するとスライドの時間が変更されます。

<!--data-ride="carousel"で即座にアニメーションの開始-->
<div id="carousel-sample" class="carousel slide" data-ride="carousel" data-interval="400">

画像の説明について

carousel-captionクラス配下にh1やpタグを設定することで画像の説明を表示する事ができます。

なお、BootStrapのCSSを利用しているとh1やh2タグはｐタグより意図的に文字を大きく設定されているので、変更したい場合は CSSで上書きする必要があります。

      <div class="carousel-caption">
                  <!--画像の説明 -->
                <h1>トランプ大統領</h1>
                <p>実は酒タバコは一切やらない</p>
            </div>