jQueryプラグインSlickのautoplayが止まらない

###発生している問題
jQueryのスライダープラグインSlickを利用して自動再生するスライダーを実装しています。
自動再生しつつ、最後のスライドで停止したいと思っているのですが、
自動再生をオンにした際（autoplay:ture）無限ループ（infinite:flase）が効いていません。

afterChangeなどを使った方法で、解決できないかと思ったのですがうまくいきません。
ご教示ください。
###ソースコード

$(document).ready(function(){
  $('.slider').slick({
  slidesToShow: 1,
  infinite:false,
  autoplay: true,
  pauseOnHover:false,
  autoplaySpeed: 2000,
  arrows: false,
  fade: true
  });
});

###slick公式
http://kenwheeler.github.io/slick/

回答3件

既に回答は出ているようですがafterChangeイベントの引数で現在のスライド位置・スライドの枚数を取得することができるようです。
コレを利用すれば外側に別途変数を保持する必要がなくなるかと思います。

javascript
1var $slider = $('.slider')
2  .on('afterChange', function(evt, slick, currentSlide) {
3    // currentSlide は現在のスライドのインデックス 0 からカウント
4    var slideCount = slick.slideCount - 1;
5    if(slideCount === currentSlide) {
6      $(this).slick('slickPause');
7    }
8  })
9  .slick({
10    slidesToShow: 1,
11    autoplay: true,
12    pauseOnHover:false,
13    autoplaySpeed: 2000,
14    arrows: false,
15    fade: true
16  });

参考 slick - Events

afterChange
Arguments : slick, currentSlide

投稿2016/02/04 10:01

KiKiKi_KiKi

総合スコア594

ベストアンサー

infinite は autoplay に対するオプションではありません。
最後の要素までいった場合に先頭に戻すか、
最初の要素を次の要素として表示するかというオプションです。

対応するとなると以下のようになるかと思います。

(document).ready(function(){
  var $slider  = $('.slider');
  var $slide   = $slider.children();
  var slideLen = $slide.length;
  $slider
    .slick({
      slidesToShow: 1,
      infinite:false,
      autoplay: true,
      pauseOnHover:false,
      autoplaySpeed: 2000,
      arrows: false,
      fade: true
    })
    .on('afterChange', function() {
      var $self = $(this);
      if((slideLen - 1) <= $self.slick('slickCurrentSlide')){
        $self.slick('slickSetOption', 'autoplay', false);
      }
    });
});

アニメーションがフェードなので、スワイプを切る想定ですかね？
その場合 arrow や dots を表示させないのであれば、
スライダーやカルーセルと呼ばれるような仕組みではないですね。
slick ではなくて他のプラグインなどを使う方が良い気はします。

投稿2016/02/04 07:51

syuji-higa

総合スコア18

回答へのコメント

KazuakiHarigaya

2016/02/04 08:12

上記コードで解決しましたので、ベストアンサーにさせていただきました！

KazuakiHarigaya

2016/02/04 08:13

スワイプは切る想定です。とはいえ、他のプラグインも検討します。ありがとうございました。

infiniteオプションですが「無限ループ」のオン・オフを設定するだけでした。
フェードがオンだと効果がわからないのですが、
フェードをオフにすると、下記のようになります（autoplayはオンの状態です）

無限ループオン：最後のスライドまで行くと、最初のスライドが画面右から流れてくる。
無限ループオフ：最後のスライドまで行くと、左にスライドして、最初のスライドまで戻っていく。

最後のスライドまで行くと止まる、という機能は含まれていません。
なので、最後のスライドまで行ったタイミングで、下記のメソッドを使う形になると思います。

JavaScript
1$('.slider').slick('slickPause');
2

「slickPause」は、オートプレイを止めるメソッドです。
任意のタイミング（今回の場合は最後のスライドが表示されたタイミング）で使うようにJSを書けば良いと思います。

HTML
1<div class="slider">
2  <div>sample1</div>
3  <div>sample2</div>
4  <div>sample3</div>
5</div>

JavaScript
1var $slider = $('.slider'),
2    contentLength = $slider.children().length - 1; // .slider直下の要素の数を取得。0から始まるインデックス番号と合致させる為に1引く。この数は最後のスライド番号と同じになります。
3    
4$slider.slick({
5  slidesToShow: 1,
6  autoplay: true,
7  pauseOnHover: false,
8  autoplaySpeed: 2000,
9  arrows: false,
10  fade: true
11  }).on('afterChange', function() {
12    // 現在のスライド番号（最初は0）を取得。
13    var currentSlide = $slider.slick('slickCurrentSlide'); 
14
15    // 最後のスライド番号と一致したら止める。
16    if(currentSlide === contentLength){
17      $slider.slick('slickPause');
18    }
19  });