Material Design for Bootstrap3（その6）スライドショーの実装

Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。

そのBootstrap3対応バージョン、「Material Design for Bootstrap3（以下、MDB3と表記）」のご紹介6回目です。

今回はスライドショーの実装について。

スライドショー、
WEBデザイン的には「カルーセル（carousel）」が正式名称なのですが、当記事では一般的な呼称「スライドショー」で統一します。

＊Material Design for Bootstrap3

本家Bootstrapスライドショーとの比較

スライドショーはBootstrap単体でも実装は可能です。

まずは、Bootstrapで実装したスライドショーを見てみましょう。
以下のデモページをご参照ください。

＊Bootstrap：スライドショーの実装

次に、MDB3で実装したスライドショーを見てみましょう。

＊MDB3：スライドショーの実装

両者を比較してみると、Bootstrapに比べてMDB3では、

◇フェードで画像が切り替わる
◇画像にシャドウ付き、マウスホバー時にシャドウが変化

この２点が違います。

個人的に、Bootstrapのスライドショーは、画像が横にパカッとスライドして切り替わる方式なので、なんか味気無いというか、ワビサビがないというか、安っぽい感じがしていまいち使う気がおきませんでした。

これに比べてMDB3のスライドショーは十分に実用可能だと思います。

コードの記述

では、コードの記述方法です。

<!-- Carousel -->
<div id="carousel1" class="carousel slide carousel-fade hoverable" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel1" data-slide-to="1"></li>
        <li data-target="#carousel1" data-slide-to="2"></li>
        <li data-target="#carousel1" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner z-depth-2" role="listbox">

        <!-- First slide -->
        <div class="item active">
            <div class="view overlay hm-blue-slight">
                <a><img src="images/XXX.jpg" class="img-responsive" alt="slide1">
                    <div class="mask waves-effect waves-light"></div>
                </a>
                <div class="carousel-caption hidden-xs">
                    <div class="animated fadeInDown">
                        <h5>画像その1</h5>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.item -->

        <!-- Second slide -->
        <div class="item">
            <div class="view overlay hm-blue-slight">
                <a><img src="images/XXX.jpg" class="img-responsive" alt="slide2">
                    <div class="mask waves-effect waves-light"></div>
                </a>
                <div class="carousel-caption hidden-xs">
                    <div class="animated fadeInDown">
                        <h5>画像その2</h5>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.item -->

        <!-- Third slide -->
        <div class="item">
            <div class="view overlay hm-blue-slight">
                <a><img src="images/XXX.jpg" class="img-responsive" alt="slide3">
                    <div class="mask waves-effect waves-light"></div>
                </a>
                <div class="carousel-caption hidden-xs">
                    <div class="animated fadeInDown">
                        <h5>画像その3</h5>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.item -->

        <!-- Four slide -->
        <div class="item">
            <div class="view overlay hm-blue-slight">
                <a><img src="images/XXX.jpg" class="img-responsive" alt="slide4">
                    <div class="mask waves-effect waves-light"></div>
                </a>
                <div class="carousel-caption hidden-xs">
                    <div class="animated fadeInDown">
                        <h5>画像その4</h5>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.item -->

    </div>
    <!-- /.carousel-inner -->

    <!-- Controls -->
    <a class="left carousel-control new-control" href="#carousel1" role="button" data-slide="prev">
        <span class="fa fa fa-angle-left waves-effect waves-light"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control new-control" href="#carousel1" role="button" data-slide="next">
        <span class="fa fa fa-angle-right waves-effect waves-light"></span>
        <span class="sr-only">Previous</span>
    </a>

</div>
<!-- /.carousel -->

「images/XXX.jpg」の箇所に任意の画像を入れてください。

画像は何枚でも足すことが可能です。

コードのカスタマイズ：スライドによる切り替え

コードのカスタマイズも可能です。

フェードじゃなくて、やっぱりスライドで画像を切り替えたいという人は、外枠のdivからclass「carousel-fade」を外せばOKです。

<div id="carousel1" class="carousel slide hoverable" data-ride="carousel">
～　中略　～
</div>

これでスライドで変化するようになります。

コードのカスタマイズ：自動切り替えの停止

スライドショーを自動ではなく手動で切り替えたい場合は、外枠のdivから属性「data-ride=”carousel”」を外し、代わりに属性「data-interval=”false”」を記述します。

<div id="carousel1" class="carousel slide carousel-fade hoverable" data-interval="false">
～　中略　～
</div>

これで画像の切り替えは手動に変わります。
画像横の「<」「>」のボタンをクリックして切り替えます。

「カルーセル」なんて、WEB業界人にしか通用しない言葉だと思います。

関連記事Material Design for Bootstrap3（その8）フォームの実装

2017.05.29

関連記事Material Design for Bootstrap3（その7）各種エフェクトの実装

2017.05.29

関連記事Material Design for Bootstrap3（その5）パララックスの実装

2017.05.29

関連記事Material Design for Bootstrap3（その4）アニメーションの実装

2017.05.29

関連記事Material Design for Bootstrap3（その3）ボタンの実装

2024.01.03

関連記事Material Design for Bootstrap3（その2）シャドウとホバーエフェクトの実装

2017.05.29

関連記事Material Design for Bootstrap3（その1）導入とカードデザインの実装

2017.05.29

関連記事マテリアルデザインを簡単に実装「Material Design for Bootstrap」

2018.12.11