兵庫県三田市でホームページ制作をしているゴリラドットです。

今日のはかなり専門的でぶっちゃけ誰が読むんだろう、という内容だけれども書くこともないんで書いておく。

slickスライダーとflexを一緒に使うとwidthがうまく取れないのかスライダーが機能しないバグの解決方法である。

 

まずは解決方法

いきなり解決方法から。

これはflexしてるオブジェクトにwidthも設定してあげれば治る。パーセント指定でもOK。

 

…いや言わんとしてることはわかる。flexしてんのにwidth使うのって意味ないじゃん、だよね。すごくよくわかる。でもこうしないと治らない。

 

はい、とりあえず解決方法は紹介したんで、こっからは気になる人だけ。

 

slickスライダーを横並びしたい

slickスライダーというスライダーを簡単に実装できる便利アイテム。すごい便利。よく使ってます。このゴリラドットのホームページトップでも多用してる。

 

それとは別にflexていう簡単に段組みできるcssがある。これも便利。自動で横幅計算してくれたりとfloatに比べてなんか近未来感があるやつ。こっちも便利。

 

しかーし！

この便利なアイテムを一緒に使うとバグる。泣きそうなのである。

flexとslick一緒に使うケース、これってスライダーを横に複数並べたい、てことなんだよなー。このホームページのトップページでもやってるんで興味あるなら見てみてね（https://gorilla.dododori.com/）。

 

このバグってslick側がflexした要素のwidthをうまく計算できてないから起こってるみたい。もし時間があるなら開発者ツールでバグってる箇所をみてみると異次元のwidthが設定されているのが分かると思う。

いろいろ試したけれど、やっぱりflex要素にwidthを自分で設定してあげるていうやり方でしか解決しなかった。

 

せっかくflex使ってるんだから幅はflex-growで設定したいけれどそれは無理、と。なんかもやもやするけれど仕方ないね。