条件
HTML
<div class="slider responsive">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
<div><h3>7</h3></div>
<div><h3>8</h3></div>
</div>
JavaScript
$('.responsive').slick({
dots: true,
infinite: false,
speed: 500,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
dots: true
}
}]
});
- slideToScrollの値をslidesToShowの値と異なる数字にする。(?)
- ブレークポイントの値未満までウィンドウサイズを小さくする。
- 最後のアイテム (上記ソースコードだと8枚目) までスライドする。
- ブレークポイントの値以上までウィンドウサイズを大きくする。
何が起こる?
- 4の後、矢印ボタンによるスライドで前のアイテムに戻れない。
なぜ?
- 正直よくわからない。現在位置の補正がうまくいってない?
- オプションで解決する?
強引な解決策
- slick.jsの1634行目を変更する。
slick.js
_.checkResponsive();
slick.js
_.checkResponsive(true);
- これをすると、リサイズ時に強制的に1枚目のスライドに戻る。
本来の解決策をご存じの方、ご教示ください……。