jQueryプラグイン「slick」で自動再生しつつ最後のスライドで停止するカルーセル
イメージスライドで、自動再生しつつ最後のスライドで停止する、という事案がありました。
こんなもの"the last carousel”こと「slick」先生なら楽勝だろうと思ったら、案外オプションに用意されていなかったので往生しました。
jQueryカルーセルプラグイン「slick」で、最後のスライドで停止させたい
自動再生は「autoplay: true,」、ループは「infinite: true,」です。教科書にそう書いてあります。
そしたら最後のスライドで止めるなら「infinite: false,」だろうと思いますが、そうは問屋がおろしません。
「infinite: false,」だと、最後までスライドすると、１つずつ頭に戻っていきます。
スライドが三枚なら１→２→３→２→１という具合です。
そこで色々と調べているとピンズドな記述を見つけたので、参考にオプションを追加してみました。
<section class="slider"> <div><img src="http://placehold.it/350x300?text=1" alt="" /></div> <div><img src="http://placehold.it/350x300?text=2" alt="" /></div> <div><img src="http://placehold.it/350x300?text=3" alt="" /></div> </section>
<script type="text/javascript">
$(document).ready(function(){
var $slider = $('.slider');
var $slide = $slider.children();
var slideLen = $slide.length;
$slider
.slick({
dots: true,
autoplay: true,
infinite: false,
pauseOnHover:true,
slidesToShow: 1,
slidesToScroll: 1
})
.on('afterChange', function() {
var $self = $(this);
if((slideLen - 1) <= $self.slick('slickCurrentSlide')){
$self.slick('slickSetOption', 'autoplay', false);
}
});
});
</script>
参照
jQuery - jQueryプラグインSlickのautoplayが止まらない(26154)｜teratail
該当のオプション以外の設定は公式サイトで。
先人の知恵に感謝です。
ていうか、オプションで簡単にできるよというのがあったら誰か教えてください。
