web

slickでスライドのたびに1枚目に戻る不具合の原因

プラグイン「slick」で実装したスライダーに以下のような不具合が。

・1枚スライドするたびに一瞬だけ1枚目のスライドに戻る

・スライドの数が実際の登録数の2倍くらいになっている

結論、私の書き方が間違っていたようです。

NG(私の書き方)

 <ul id="slick-slider">
   <img src="image01.jpg">
   <img src="image02.jpg">
   <img src="image03.jpg">
 </ul>

liタグ付けてない。なんとなくは動くんですが、上記の不具合がでました。

OK(正しい書き方)

 <ul id="slick-slider">
   <li><img src="image01.jpg"></li>
   <li><img src="image02.jpg"></li>
   <li><img src="image03.jpg"></li>
 </ul>

liタグあり。こちらに書き直したら改善しました。スライド画像は一つずつliタグで囲わないといけないようです。

以上