0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Slickスライドでブラウザ拡縮時にコンテンツ幅も保ちたい時の応急処置

Posted at

Slickスライドでブラウザ幅を縮小した後に幅を拡大すると
スライドのwidth(仕様でついてる方)が縮小時の幅が効いたままでブラウザ幅拡大時にコンテンツ幅が戻らない!
という事象に出会いました。

その際の調整方法を備忘録として残します。

原因

基本的にスライドのコンテンツ幅がおかしくなる時の原因は以下のクラスについているwidthだったりします。

.slick-track
.slick-slide

応急処置

私の場合、上記のクラスにそれぞれ納めたいコンテンツ幅を
widthやmax-widthで指定する(いずれも!importatnt付き)
でなんとか表示が戻りました。

slick側でDOMを触っている雰囲気があるため、
外部cssでレイアウトを整えている場合は!importatntで指定しないとCss優先順位の影響でwidth効かない場合があるので注意が必要そう

学び

slickでwidth周りがおかしくなったら

  • .slick-track
  • .slick-slide

を真っ先に確認するのが良いかもしれないです

何年もslickを使っていますが、いまだに慣れないです....

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?