dayjournal | Materialize #005

Materializeでスライダーを構築するには下記のように記述します。

Materializeのサイト内のMediaを確認すると、サンプルがあるのでそれを参考にスライダーの機能を実装してみます。

「index.html」と「script.js」を修正します。

index.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
    <title>Materialize_sample</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="./materialize/css/materialize.css" rel="stylesheet" media="screen,projection" />

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="./materialize/js/materialize.js"></script>
    <script src="./js/script.js"></script>
</head>

<body>

    <ul id="dropdownTop" class="dropdown-content">
        <li><a href="collapsible.html">JS 01</a></li>
        <li><a href="collapsible.html">JS 02</a></li>
        <li><a href="collapsible.html">JS 03</a></li>
    </ul>

    <nav>
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdownTop">Javascript<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
            <ul class="side-nav" id="mobile-demo">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
        </div>
    </nav>

    <h1>Hello, world!</h1>

    <div class="slider">
        <ul class="slides">
            <li>
                <img src="http://lorempixel.com/580/250/nature/5"> <!-- random image -->
                <div class="caption center-align">
                    <h3>Slider</h3>
                    <h5 class="light grey-text text-lighten-3">1枚目</h5>
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/580/250/nature/8"> <!-- random image -->
                <div class="caption left-align">
                    <h3>Slider</h3>
                    <h5 class="light grey-text text-lighten-3">2枚目</h5>
                </div>
            </li>
            <li>
                <img src="http://lorempixel.com/580/250/nature/6"> <!-- random image -->
                <div class="caption right-align">
                    <h3>Slider</h3>
                    <h5 class="light grey-text text-lighten-3">3枚目</h5>
                </div>
            </li>
        </ul>
    </div>

</body>

</html>

script.js


(function ($) {
    $(function () {

        $('.button-collapse').sideNav();

        $('.dropdown-button').dropdown({
            constrain_width: false,
            hover: true,
            belowOrigin: true
        });

        $('.slider').slider({
            indicators: true,
            height: 300,
            transition: 1000,
            interval: 3000
        });

    });
})(jQuery)

作成したindex.htmlを実行すると下記のように表示されます。スライダーが表示され一定間隔で画像が切り替わります。

スライドインジケータを非表示： indicatorsを変更します。


        $('.slider').slider({
            indicators: false,
            height: 300,
            transition: 1000,
            interval: 3000
        })

スライダーの切り替わる間隔を変更： intervalを変更します。


        $('.slider').slider({
            indicators: true,
            height: 300,
            transition: 1000,
            interval: 6000
        })

スライダーの動きはJSで設定します。既存タグでは文字サイズ・色・配置はHTML側で設定します。独自でタグを割り当てればCSSで指定することも可能です。

参考文献
Materialize

dayjournal memo

Materialize #005 – スライダー

Yasunori Kirimoto 2016/6/27

index.html

script.js