19/03/19
元記事よりこちらがメインになってきたので、タイトルを変更しました。
世に出るスライダープラグインの中で、押し出し式ではないワイプ切り替えのものが見つけられなかったため、思い切って自作してみました。
#サンプル
https://kackie.github.io/wipeSlider/
使い方
ファイルはGithubから一式ダウンロードできます。
https://github.com/Kackie/wipeSlider
※test.htmlは旧バージョン。
HTML
外部ファイル読み込み
<link rel="stylesheet" href="css/wipeSlider.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="script/jquery.wipeSlider.js"></script>
スライド用のCSSとjQuery、プラグインのJSを読み込みます。
CSSは開いてみればわかりますがすごくシンプルです。必須なのはこれだけです。
ページャー等の見た目の調整はサンプルのHTMLに直書きしています。参考にしてもらっても、自由にスタイルを書くのもよいと思います。
スライド部分
<div class="slidesWrap js_wiper">
<ul class="slides">
<li class="slide">
<img src="https://dummyimage.com/980x500/ccc/fff&text=1" alt="">
</li>
<li class="slide">
<img src="https://dummyimage.com/980x500/ccc/fff&text=2" alt="">
</li>
<li class="slide">
<img src="https://dummyimage.com/980x500/ccc/fff&text=3" alt="">
</li>
</ul><!-- / .slides -->
</div><!-- / .js_wiper -->
一番シンプルな形です。
階層が守られていればulタグ以外でも構いません。
jQuery
$('.js_wiper').wipeSlider();
最低限これだけ書けば動きます。
$('.js_wiper').wipeSlider({
transition : 1000,
auto : true
});
オプションを設定するとこんな感じです。
オプション設定
| ラベル | 機能 |
|---|---|
| transition | スライドが切り替わるときの速度を設定します。 初期値は500。 |
| auto | 自動再生を設定します。 初期値はfalse。 |
| duration | 自動再生時、スライドの表示時間を設定します。 初期値は4000。 |
| pager | ページャーを生成します。 初期値はtrue。 |
| controls | 前後のスライドに切り替えるコントローラーを生成します。 初期値はtrue。 |
| direction | アニメーション方向を設定します。 初期値は'horizontal'。 |
| easing | ワイプアニメーションのeasingを設定します。 初期値は'linear'。 |
| slideBefore | スライド切り替えが始まったタイミングで発動するコールバックです。 |
| slideAfter | スライド切り替えが終わったタイミングで発動するコールバックです。 |
directionオプションの詳しい設定
| 値 | 効果 |
|---|---|
| 'horizontal' | 右から左にかけてワイプします。 |
| 'vertical' | 上から下にかけてワイプします。 |
| 'four' | 四方向に順番にワイプします。 |
| 'custom' | スライド毎にワイプの方向を設定します。 .slideに対しdata-dir="toLeft"、data-dir="toRight"、 data-dir="toTop"、data-dir="toBottom"のいずれかを設定します。 |
| '上記以外' | アニメーションはしません。 切り替えの動作だけ自作したいとき用に。 |
コールバックについて
下記の引数を利用できます。
| 引数 | 内容 |
|---|---|
| slideNum | activeのスライドのindex番号を返します。 |
| slideLength | スライダーのスライド数を返します。 |
| 下記のような記述になります。 |
$('.js_wiper').wipeSlider({
slideBefore : function(slideNum,slideLength){
console.log('スライドなう');
},
slideAfter : function(slideNum,slideLength){
console.log('スライド完了');
}
});
その他の仕様
スライドはすべて同じサイズにしてあるのが前提です。
プラグインでサイズや位置の調整は行いません。
表示中のスライドにはactiveクラスが付きます。
これを使用して、スライド内のインタラクション作成に役立ててもらえればと思います（コールバックも用意してあるけど、簡単なものはこれを使っちゃえば楽）。
「direction:'上記以外'」を一応用意しておいたのですが、使いみちとしては、例えばこんなのとか・・・。
スライドの切り替えを再現するのに、z-index操作でアクティブのスライドが一番上、アクティブの一つ前のスライドが二番目、それ以外が三番目になるようにしています。
この動作と組み合わせて、オリジナルのスライドアニメーションを作ったりいろいろ面白そうなことができそうですね。
別タブでページを閲覧してから戻ってきた際にアニメーションの挙動がおかしくなってしまわないように、タブが非アクティブ時にはclearIntervalがかかり、戻ってくるとsetIntervalが再発動するようにしています。
アプリ切替時や検証ツールを開いた際に自動アニメーションが一時的に止まってしまうのもこのためです。
感想
プラグイン自作初挑戦です。
二度の追記を経て、なかなか機能的なプラグインに仕上げることができました。
ワイプアニメーションにjQueryのanimateメソッドを使ったのですが、step関数がとっても便利ですね。
step内で使える引数nowに、animateで変化させているプロパティの値が入るというもので、
プラグイン内では上記を使いclipのマスク幅を変えることでアニメーションを再現しています。
使い方を覚えておくと色々と応用が効きそうですね。
サンプルのHTML内にいくつかスライダーを作成しましたが、このインタラクションを使ってUNIQL○CKみたいなのも作れそうだなーなんて思いつきました。
インタラクションの勉強にもなってよかったです。
今後のアップデートは思いつき次第になりますが、これを見て・使ってみてこんなのが欲しいというのがもしあれば頑張って作ってみようと思うので、お気軽にご意見頂ければと思います！