私はアニメーションが得意じゃないので、
こういう動かす系やる時はライブラリ探して設置します。
このテーマと同じ会社がたまたまスライダー出してたので
今回それを使う事にしました。
IE8を完全に捨ててきてるので、
お客さんに確認取った方が良いと思いますが、
動きも綺麗だし設置も簡単なので個人的にオススメです。
設置方法 HTML部分
必要なファイルはここから取れます。
class flexsliderの中にslidesっていうul作ってその中にlist入れていきます。
この後にjsの設定をしていきます。
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
<li>
<img src="slide4.jpg" />
</li>
</ul>
</div>
設置方法JS部分
公式ページだとjQueryは下のほうで読み込まれてるので、
jsの読み込みはフッター部の後くらいに入れた方がいいかもです。
画面が読み込まれたときに.loadメソッドの中に関数入れて
flexsliderの要素掴んで.flexsliderメソッドを呼んでから、
オブジェクト作ってパラメータを設定していきます。
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
slideshow: true,
slideshowSpeed: 5000,
animationSpeed: 600,
animationLoop: true,
start: function(slider){
slider.vars.animationSpeed=3000;
console.log(slider.vars.animationSpeed);
$('body').removeClass('loading');
}
});
});
こんな感じになります。
パラメータの説明
このままかかれても意味不明なので、
簡単にコメントの中に説明を書いていきます。
animation: "fade", //アニメーションのタイプを選択します。他にはslideがあります。
slideshowSpeed: 5000, //スライドするスピードを1000msで設定します。1000で1sです。
animationSpeed: 600, //アニメーションのスピードを指定します。
animationLoop: true, //スライドをループさせるか設定します。
start: function(slider){ スタートが終わった後に実行するコールバック関数
slider.vars.animationSpeed=3000; //アニメーションのスピードを再設定しています。
$('body').removeClass('loading');
}
こんな感じです。
もちろんこれ以外にも沢山設定値があって、
それら全部をgithubでまとめておいてくれてるので、
そちらも見てみると良いと思います。
特にこのタイミングじゃなくても、コールバック関数は
色んなタイミングで設定されているので、参考にする価値があります。
