[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory

サイト構築 -JavaScript

Post on:2015年4月9日

Iroyの特徴

Vanilla JSで書かれたタッチデバイス対応のミニマルなスライダー
ハードウェアアクセラレータによるトランジション
jQueryのプラグインとしても動作可能
エフェクトはさまざまなオプションを用意
カルーセルなどの無限ループ対応

Ioryのデモ

デモではミニマルながら、多機能なさまざまなスライダーを楽しめます。

デモページ：Single Element

スライダーいっぱいにパネルを一つずつスライドするシンプルなデモ。

デモページ：Variable Width

各パネルの幅がばらばらでも、一つずつスライドすることができます。

デモページ：Multiple Slides to Scroll

複数のパネルを同時にスライドさせるデモ。

デモページ：Custom Easings

イージングのエフェクトをカスタマイズしたデモ。

Ioryの使い方

Step 1: HTML

HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。

<div class="slider js_simple simple">
    <div class="frame js_frame">
        <ul class="slides js_slides">
            <li class="js_slide">1</li>
            <li class="js_slide">2</li>
            <li class="js_slide">3</li>
            <li class="js_slide">4</li>
            <li class="js_slide">5</li>
            <li class="js_slide">6</li>
        </ul>
    </div>
</div>

Step 2: CSS

スライダーのスタイルを定義します。

.frame {
        position: relative;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .slides {
        display: inline-block;
    }

    li {
        position: relative;
        display: inline-block;
    }

Step 3: JavaScript

Ioryは単独のスクリプトまたは、jQueryのプラグインとして動作させることができます。
まずは、Ioryを単独のスクリプトとして使用する場合。

<script src="js/lory.min.js"></script>
    <script>
        'use strict';

        document.addEventListener('DOMContentLoaded', function() {
            var simple = document.querySelector('.js_simple');

            lory(simple, {
                // options going here
            });
        });
    </script>

jQueryのプラグインとして動作させるには、外部ファイルにjquery.jsを加え、以下のように記述します。

<script src="js/jquery.lory.min.js"></script>
    <script>
        'use strict';

        $(function() {
            $('.js_simple').lory({
                infinite: 1
            });
        });
    </script>