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

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

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

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

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

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

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

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

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

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

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

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

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