Slickスライドでブラウザ幅を縮小した後に幅を拡大すると
スライドのwidth(仕様でついてる方)が縮小時の幅が効いたままでブラウザ幅拡大時にコンテンツ幅が戻らない!
という事象に出会いました。
その際の調整方法を備忘録として残します。
原因
基本的にスライドのコンテンツ幅がおかしくなる時の原因は以下のクラスについているwidthだったりします。
.slick-track
.slick-slide
応急処置
私の場合、上記のクラスにそれぞれ納めたいコンテンツ幅を
widthやmax-widthで指定する(いずれも!importatnt
付き)
でなんとか表示が戻りました。
slick側でDOMを触っている雰囲気があるため、
外部cssでレイアウトを整えている場合は!importatntで指定しないとCss優先順位の影響でwidth効かない場合があるので注意が必要そう
学び
slickでwidth周りがおかしくなったら
- .slick-track
- .slick-slide
を真っ先に確認するのが良いかもしれないです
何年もslickを使っていますが、いまだに慣れないです....