PcSchool.Club

パソコンを分かりやすく解説することを目指す無料のスキルアップサイトです

岐阜のパソコン教室「パソコンスクール・テルン」

slick.jsを活用した際のボタン位置調整を calc で行う方法

2019年4月24日

web制作をする際にJavaScriptのファーストビューの画像スライダーとして
よく活用される slick.js ですが、
本日は、NextとPreviewボタンの位置と
画像の枚数を表す丸〇〇〇の位置調整についてご紹介します。

slick.jsを活用した際のボタン位置をcalcで揃える

この、丸のボタン位置はslick-theme.cssの123行目に書いてある通り、
画像領域から、bottom:-25px;で設定されています。

Preview(Next)ボタンですが、こちらも同様にslick-theme.cssの
21行目(top:50%;)と81行目(left:25px;)で位置調整がされています。

今回、はまったのはtop:50%の縦位置です。

任意のcss内で書き換えたのは、top:104%;にし、見た目的には真横に調整することに
成功しましたが、レスポンシブ対応のslick.jsのおかげでウィンドウ幅が変わると
見事に縦位置がずれました・・・

slick.jsを活用した際のボタン位置がずれた

では、丸のボタン位置同様に、bottom:-25px; など、bottomで調整すれば
いいのでは?と思いましたが、topの方が強く、bottomの数値が効きませんでした。
(!importantも試しましたが、効かず。)

そこで、今回活躍したのが、css内で数値の計算式が使える【 calc 】です。
(calcの詳しい内容は、今回省かせていただきます。)

最終的に上手くいった形はこちら。

top:104%; → top: calc(100% + 16px);

※16px部分はデザインによって変わります。

こちらは、画像領域の高さheight + 丸のボタン位置までの数値 という計算です。

これで、ウィンドウサイズが変わっても、丸ボタンの位置とNext、Previewボタンの
位置が綺麗に揃いました。

calcを使いこなせれば、ウィンドウサイズによって数値を変えられるので
レスポンシブ対応などが捗りますね。