jQueryでワイプ切り替えのスライダーを実装する

※機能を追加してプラグイン化しました。こちらの記事へどうぞ。
下記の旧バージョンもシンプル版として一応残しておきます。

サンプル

使い方

ほぼサンプルのコピペでOKで、設定が必要なのはアニメーション時間、スライド表示時間のところくらいです。

コードの解説

簡単なコードしか書いてないので、JS全部載せちゃいます。

$(window).on('load', function(){
    var slides = $('.js_wiper'),
        slide = slides.find('.slide'),
        slideW = slide.outerWidth(true),
        slideH = slide.outerHeight(true),
        length = slide.length - 1,
        transition = 1000, //アニメーション時間
        duration = 4000; //スライド表示時間
    slide.eq(0).addClass('active');

    //スライド用のクラス切り替え
    var num = 0;
    var wiper = function(){
        if(num < length){
            num++;
        } else {
            num = 0;
        }
        slide.removeClass('active');
        slide.eq(num).addClass('active').css({
            clip: 'rect(0px,'+ slideW +'px,'+ slideH +'px,0)',
            'z-index':'2'
        });
        setTimeout(function(){
            slide.filter('.active').css({
                'z-index':'1'
            });
            slide.not('.active').css({
                clip: 'rect(0,0,' + slideH +'px,0)',
                'z-index':''
            });
        },transition);
    };
    setInterval(wiper, duration);

    //スライドのアニメーション作成
    slide.css({
        width:slideW,
        height:slideH,
        transition:'clip ' + transition/1000 + 's'
    });
    slide.filter(':nth-child(n+2)').css({
        clip: 'rect(0,0,' + slideH +'px,0)',
    });
});

まず最初のvarでスライドのサイズと枚数を取得、表示時間とアニメーション時間の設定をします。
setIntervalの設定をします。スライド1枚目から順番にactiveクラスを付け替えるという動作を表示時間の間隔で行います。
activeクラス付きは他のスライドより手前に来るように、z-indexで調整します。

アニメーションはCSSのtransitionとclipで作りました。
最初に取得したスライドの幅、高さをもとに作ったマスクを操作し、ワイプ表示を再現しています。

注意点

• レスポンシブ、リキッド対応はしていないです。スライドのサイズの取得は一回きりだけ。
• CSSのtransitionを使っている関係で、変数のtransitionとdurationに同じ値は設定できません（わざわざしないと思うけど）。
• 画像ではなくスライド内にHTMLを書くこともできますが、各スライドに背景を指定or画像で覆う必要があるのと、全スライドのサイズを揃えておくのが前提です。
  CSSでwidth,heightを指定しておくか、画像スライドならimgにwidth,height属性を指定しておいたほうがいいかも。
  サンプルでは画像読み込み後に動いてほしいので$(window).on('load', function(){としています。

感想

プラグインのスライダーって押し出し式の切り替えばっかりですよね。今回作ったようなタイプをずっと探していたのですがなかなか見つけられず..。
作ってみて一番迷ったのは、スライドの中身を崩さずアニメーションさせる方法でした。
画像をbackgroundで指定してbackground-positionを操作するやり方もありますが、これだと画像スライドにしか対応できないのと、JSのためにHTMLを寄せて書かなきゃいけないのがちょっと嫌でした。
clipは設定が少し面倒くさいですが、一筆書きっぽいインタラクションを簡単に作りたいときなんかにも使えそうでなかなかよいですね。

今後はもうちょっと機能を増やしてスクリプトのプラグイン化にも挑戦してみたいです。