jQueryの写真スライドショープラグインはslippryがおすすめかも。時代遅れだけど追加してみた話|おちゃカメラ。

写真アカウント用のポートフォリオwebサイトで、巷によく見られるような写真スライドショーを追加したいなと思いました。短い時間でサクッと作業を終わらせたかったので、使い慣れているjQueryのプラグインを探してみました。ですが、これといった良い物が見つからずに苦労しました(^ ^;)

結論から先に書くと、一番おすすめだと思うjQueryのプラグインはslippryでした。またTouchSwipe-Jquery-Pluginプラグインを活用するとスワイプに対応させる事ができるようです。詳しくは後半で解説していきます。

今回は、写真スライドショー(カルーセル)プラグインを追加した時にハマった話を備忘録として残したいと思います。今どきjQuery使うなと怒られそうですが、優しい目でご覧頂ければ幸いです。

Golden apple | Sony α7 + Sonnar T* FE 55mm F1.8 ZA ©

一番良さげなプラグインはslippry

写真スライドショーが実装できるjQueryプラグインは、ネットで無数に存在しています。ただし、

レスポンシブに対応している
スマートフォンのスワイプ操作に対応している

といった最近では必須となっている機能をサポートしているプラグインは数が少ないようです。…というか、私はこの条件を満たしているjQueryプラグインを見つけることができませんでした。(良いものがあったら教えて下さい！)

まあ、jQueryの全盛期にはスマホサポートという概念は無かったですからね…。

ということで、プラグインの一部改造も含めてプラグインを探してみる事にしました。すると、slippryというスライドショープラグインがなかなか良さそうでした。

GitHub
booncon/slippry

レスポンシブデザインに対応しており、ペイジャーやコントローラーなどのUIも一通り揃っています。

スワイプ操作が可能になるTouchSwipe-Jquery-Plugin

さらに、jQueryでスマホ等のタッチデバイスのスワイプ操作を検出できるプラグインを使います。

GitHub
mattbryson/TouchSwipe-Jquery-Plugin
A jQuery plugin for touch devices

bowerでプラグインをインストール

ということで、先ほどご紹介したプラグインをbowerでインストールします。

bash

1	$ bower install jquery-touchswipe slippry --save

それぞれのプラグインで使用するjsファイルやcssファイルを、サイトのアセットファイルにインポートしておきます。

slippryでスワイプ操作可能にする

それでは早速スライドショーを実装していきます。

portfolio.html

<div class="content-slider">
    <ul>
        <li>
            <a href="#side1">
                <img src="image1.jpg" />
            </a>
        </li>
        <li>
            <a href="#side2">
                <img src="image2.jpg" />
            </a>
        </li>
        <li>
            <a href="#side3">
                <img src="image3.jpg" />
            </a>
        </li>
    </ul>
</div>

続いて、jsファイルにslippryの呼び出しと、スワイプ操作を実装していきます。jQueryの即時関数の中に、プラグインの命令を書きます。

script.js

(function($){
    $(".slider-content").each(function() {
        $(this).data('slippry',$(this).slippry({
            captions: false,
            speed: 3000,
            pause: 6000,
            controls: false,
            start: "random",
        }));
    });
    
    $('.slider-content').swipe({
            swipeLeft : function(event, distance, duration, fingerCount, fingerData, currentDirection) {
                var lSlippry = $(this).data('slippry');
                lSlippry.goToNextSlide();
            },
            swipeRight : function(event, distance, duration, fingerCount, fingerData, currentDirection) {
                var lSlippry = $(this).data('slippry');
                lSlippry.goToPrevSlide();
            },
        }
    );
})(jQuery);

.slippry()がslippryプラグインのメソッドとなっており、.swipe()メソッドがTouchSwipe-Jquery-Pluginプラグインのメソッドです。

見た目を調整する

最後にUIやスライドの見た目を調整します。slippryプラグインをポートフォリオサイトに組み込んだら、何故か点線が表示されるようになりましたので、それらを非表示にしておきます。

style.scss

.sy-caption-wrap .sy-caption a:link,
.sy-caption-wrap .sy-caption a:visited ,
.sy-pager li.sy-active a,
.sy-pager li a{
    outline: none !important;
    text-decoration: none !important;
    border: none;
}

#slider-content{
    *{
        outline: none !important;
        text-decoration: none !important;
        border: none;
        &:hover , &:visited , &:focus , &:active , &:link{
            outline: none !important;
            text-decoration: none !important;
            border: none;
        }
    }
    li{
        display: block;
        padding: 0;
        margin: 0;
    }
}