7
7

More than 5 years have passed since last update.

[jQuery] slick.jsのレスポンシブオプションバグ?

Posted at

条件

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
    }
  }]
});
  1. slideToScrollの値をslidesToShowの値と異なる数字にする。(?)
  2. ブレークポイントの値未満までウィンドウサイズを小さくする。
  3. 最後のアイテム (上記ソースコードだと8枚目) までスライドする。
  4. ブレークポイントの値以上までウィンドウサイズを大きくする。

何が起こる?

  • 4の後、矢印ボタンによるスライドで前のアイテムに戻れない。

slick.png

なぜ?

  • 正直よくわからない。現在位置の補正がうまくいってない?
  • オプションで解決する?

強引な解決策

  • slick.jsの1634行目を変更する。
slick.js
_.checkResponsive();
slick.js
_.checkResponsive(true);
  • これをすると、リサイズ時に強制的に1枚目のスライドに戻る。

本来の解決策をご存じの方、ご教示ください……。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7