Nivo Sliderといえば、もう定番のコンテンツスライダーのjQueryプラグインですよね。エフェクトもたくさんあるし、使い方も簡単ですし。
そのエフェクトなんですけど、
「左の矢印と右の矢印で動きを変えたい！！！！！！」
って思ったことないですか？戻るボタンで左にスライドとか、次へボタンで右にとか。まぁ、別に僕も人から言われて「確かに！」って思ったんですけど。。。。。。
そんなの機能としてあるでしょ！とか呑気に思っていたら、どうやらそんなものはないようなので、JQueryをガリガリ書く羽目になったわけで。そのコードをさらしたいと思います。
[js]
$(window).load(function() {
var $slider = $(‘#slider’);
$slider.nivoSlider({
effect: "sliceUpRight",
afterChange: function(){
$slider.find("img").attr("data-transition","sliceUpLeft");
}
});
$(".nivo-prevNav").on( "click", function(){
$slider.find("img").attr("data-transition","sliceUpRight");
});
$(".nivo-nextNav").on( "click", function(){
$slider.find("img").attr("data-transition","sliceUpLeft");
});
});
[/js]
Nivo Slider 3.2で動作を確認しています。
Nivo Sliderはスライドする要素にdata-transitionを設定しておくと、そこに設定されているエフェクトでその要素にスライドします。その値を書き換えているだけという、なんとも単純な作りです。
普段何気なく使っているプラグインもソースを眺めてみると、意外にあんなこともこんなこともできるんだ！って発見がありますよねぇ～。