私はよくスライダーを実装する際にjQueryプラグインである「slick」をよく使うのですが、今回はそのslickを使ってスライドショー（フェイドショー？）などを作った際に一番最後まで行ったら自動再生を止めたいといった依頼を受けました。

そんなに難しくないだろ〜なと思い引き受けたら、これがビミョーに手こずる内容だったので記録として残しておきたいと思います。

Google先生に聞いたら、、、

Google先生に聞いてみたところやはり記事がありました。

記事を見ながら実装をして簡単簡単〜と思っていたらあらびっくり、
最初は最後まで行ったら停止しているように見えたのですが、しばらく見てたら逆順で動きが再開してしまいました。。。

 

実装した内容

今回はスライドショーと言いつつ、フェードバージョンで実装しました。
今覚えば紹介していた記事はスライドの状態で紹介していたのでそれが原因かもしれませんが、、、あまり考えづらいような。。。

以下のコードでフェードバージョンの最後で停止するものを行いました。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="slick.min.js"></script>


<div id="fader">
	<div class="pht"><img src="http://placehold.it/350x300?text=1" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=2" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=3" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=4" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=5" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=6" alt=""></div>
</div>

<script type="text/javascript">
	$(function() {
		var fadeLength = $("#fader > .pht").length;
		if (fadeLength > 0) {
			$("#fader")
				.slick({
					infinite: false,
					autoplay: true,
					autoplaySpeed: 3000,
					speed: 300,
					fade: true,
					dots: false,
					arrows: false,
					draggable: false,
					swipe: false,
					slidesToShow: 1,
					slidesToScroll: 1
				})
				.on('afterChange', function() {
					var _self = $(this);
					if ((fadeLength - 1) > _self.slick('slickCurrentSlide')) {
						setTimeout(function() {
							$("#fader .slick-next").click();
						}, 3000);
					}
				})
			;
		}
	});
</script>

ただこれだと上記に記載した通り最後まで行った後逆順でフェードショーが始まってしまいダメでした。。。

 

ちょっと考え方を変えて自分で実装して見た

上記でうまくいかなかった原因としては
・フェードだから？
・何かのオプション設定の書き方が悪い？
・そもそもautoplayが最初からtrueだから？
と考えた時に、autoplayをtrueにせずに矢印ボタン出しちゃって最後の1毎に行くまでjsでクリックさせちゃえばいいんじゃね？

と思ったので以下のコードで実装して見ました。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="slick.min.js"></script>


<div id="fader">
	<div class="pht"><img src="http://placehold.it/350x300?text=1" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=2" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=3" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=4" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=5" alt=""></div>
	<div class="pht"><img src="http://placehold.it/350x300?text=6" alt=""></div>
</div>

<script type="text/javascript">
	$(function() {
		var playSpeed  = 3000;
		var fadeLength = $("#fader > .pht").length;
		if (fadeLength > 0) {
			$("#fader")
				.slick({
					infinite: false,
					accessibility: false,
					autoplay: false,
					autoplaySpeed: playSpeed,
					speed: 300,
					fade: true,
					dots: false,
					arrows: true,
					draggable: false,
					swipe: false,
					slidesToShow: 1,
					slidesToScroll: 1
				})
				.on('afterChange', function() {
					var _self = $(this);
					if ((fadeLength - 1) > _self.slick('slickCurrentSlide')) {
						setTimeout(function() {
							$("#fader .slick-next").click();
						}, playSpeed);
					}
				})
			;
			setTimeout(function() {
				$("#fader .slick-next").click();
			}, playSpeed);
		}
	});
</script>

私は上記で問題は解決できました。

内容としては
・playTimeの変数にスライド（フェード）が終わってから何秒後にスライド（フェード）を行うかを設定
・setTimeoutで最後の1枚になるまでボタンをクリックさせる
ものです。

注意点としてはこのままだと前へ、次へのボタンが表示されてしまうのでCSSで

#fader button {
	display: none !important;
}

を記述してあげる必要があります。

 

 

以上！