TL;DR

webでページングを実装するときに超便利なプラグイン「Slick」では、
・「1ページあたりの項目表示数(slidesToShow)」
・「1回のスライドで何項目スライドさせるか(slidesToScroll)」
・「初期ページを何ページ目にするか(initialSlide)」
などといった初期設定をすることが可能です。

ここで、たとえば
・1ページあたり5項目表示し
・1スライドで5項目分スライドさせたい
・そして表示ページは現在のページに従って動的に変更したい
という仕様にする場合に、素直に「slidesToShow: 5, slidesToScroll: 5, initialSlide: 現在のページ」みたいなことすると、Slickのページングがおかしな挙動になる場合があるため、ここではその解決法を書いていきます。

どうなるのか

それぞれの初期値は下記の通り
・slidesToShow:1
・slidesToScroll:1
・initialSlide:0
のため、初期値のまま例えば数ページ分の項目があるSlickを実装すると、下記のように
「1」→スライド「2」→スライド「3」→スライド....　となります(「」内が1度に表示される項目数です。わかりにくくてすみません)
そして「initialSlide:0」のため、たとえば3ページ目をクリックすると、Slickの表示は「1」からになっています。

TL;DRの仕様は下記のようなイメージ
「1 2 3 4 5」→スライド→「6 7 8 9 10」→スライド「11 12 13 14 15」...
そして「initialSlide」が現在のページ数を表す場合、「現在のページがSlickのスライドの初期値になっていい感じになる」と思いたいですが、そうはうまくいかないみたいです。

上記の設定をコードに落とし込むと、こんな感じ

sample

var initialSlideNum = ****; //例えばURLからページ番号を取ってくる

$('#sample').slick({
        infinite: false, //無限ループの無効
        slidesToShow: 5,
        slidesToScroll: 5,
        initialSlide: initialSlideNum
});

で、これをすると何がいけないのかというと、例えば7項目あるid=sampleの要素を上記Slickにかけた場合、initialSlideNumが「0,5」のときは正常に動作するのですが、
「1,2,3,4,6,7」のときはスライドが端までいかず、途中で引っ張られるように戻ってしまいます。(端の1,2が押せなくなる)。

原因

正確なことはわかりませんが、「slidesToScroll」を1に戻すと問題なく動作するため、「initialSlide」がたとえば「2」に設定されたとき、そこを起点に「slideToScroll:5」が適用され、ページが「1,2」「3,4,5,6,7」のように分割され、結果「1,2」側が5件に満たないので表示できない、みたいな動作になっているように感じます。

つまり、「initialSlideNum」に設定する値は、ただページ数をそのまま表示するのではなくて、
「slidesToScroll」で割り切れる値にする必要があるということになります。

解決法

今回自分のほうでは下記のように修正しました。

sample2

var slidesToScrollNum = 5;
var nowPage = ****; //例えばURLからページ番号を取ってくる

var initialSlideNum = parseInt((nowPage/slidesToScrollNum ),10); //nowPageをslidesToScrollNumで割って小数点以下を消す
 if(nowPage%slidesToScrollNum == 0) initialSlideNum = initialSlideNum-1; //割り切れるときだけ前ページ
initialSlideNum = initialSlideNum*slidesToScrollNum; //改めてslidesToScrollNumでかける

$('#sample').slick({
        infinite: false, //無限ループの無効
        slidesToShow: 5,
        slidesToScroll: slidesToScrollNum ,
        initialSlide: initialSlideNum
});

こうすることで、項目数16のSlickの場合
・現在のページ数が1,2,3,4,5のとき -> initialSlideNumは0になる -> 初期ページは1になる
・現在のページ数が6,7,8,9,10のとき -> initialSlideNumは5になる -> 初期ページは6になる
・現在のページ数が11,12,13,14,15のとき -> initialSlideNumは10になる -> 初期ページは11になる
・現在のページ数が16のとき -> initialSlideNumは15になる -> 初期ページは16になる

となりました。

何かご指摘やもっと良い方法等がありましたらコメントお願いします！

【Slick】initialSlideを設定するとページングがおかしくなる場合の解決方法

TL;DR

どうなるのか

原因

解決法