Slickで作ったSliderで画像とdots間の大きな隙間を強引に解決した方法

Slickで作ったSliderで画像とdots間の大きな隙間を強引に解決した方法

今ドメイントップの作り変えを行ってまして、TOPページにsliderを置こうと。
で、簡単だからSlickでいいかなと思い作業をしたら、画像とページ送りのドットとの間に超でかい隙間が発生。

スマホで見ると隙間更にデカいし。
色々とスマートな方法探したのですが、解決に至らなかったので力業で解決しました。

まずは基本コード

sliderの前でCSSを読み込んで、jqueryの後にslickのjs読み込んで、スライドを<div>とか<li>とかで囲って。

そんなに難しい事はなく「おしまい」なはずだったんですよね。

書いた結果発生した事態

この隙間、スマホで確認すると画像の3倍ほどの高さを持つようになってました。
これはダメダメすぎる…。

色々やってみた事

まぁ出来ないのあたりまえなんですけど、迷走してましたね。

Heightを誤認しているのは何処かを探し出す

Heithtをautoにしてもマッチしてこないと言う事は、何処かのパーツが高さを誤認識していると考えてOKです。
なので、解決のためにはまずどこが誤認識しているかを探し出すことがスタートになります。

私の場合は【 <div class=”single-item”> 】にstyle=”height:50%;” を加えた所、ドットとの距離が縮まりました。
このクラスはsliderの画像を格納する親になります。

「画像を100%表示にしてるから、何かがきっかけで改行されて下に来てる値がある？」
そう思って80%にしても50%にしても症状は変わらず。
でも、ここで高さを明示すれば調整できる事が解りました。

レスポンシブデザインで画面サイズに合わせて画像サイズは可変するので固定値指定はNG

スマホに合わせれば画像は縮小されるのでPCに合わせた固定値(例えばHeitght:400px)ではスマホの時に大きな空白になります。かといってスマホに合わせればPC表示で画像の全貌が見えない状態に…。

だったら画面サイズに合わせて高さを変えればいいんじゃね？
と言う事で、実装です。

画面サイズに合わせて指定Divの高さを可変させる

■HTML

【 id=”sliders” 】を振り当てて、このIDの styleをJSで計算した値に置き換えると言うスクリプトです。

JavaScript内の【sW = window.innerWidth; 】で画面サイズ(横幅)を取得
スライダー用の画像の縦横比は固定しているので、そこから算出した係数 0.4 をsWに乗算。
小数点面倒なので、【 Math.round()】で丸めてstyleに渡してMAXの高さを調整します。

【 style=”” 】は本来必要ないのだけど、可変させてるよという目印で書いてあります。
強引なやり方ではあるけど、これでとりあえず見た目は整いました。

まとめ

プログラミングの面白いのは道筋さえ正しければ色んなルートで構築できるところです。

でもこの隙間、他の人は出来てないの？
ググっても明確な答えにたどり着けなかったんだよねぇ…。