Swiper.jsなどスライダー系の前後の矢印ボタンを画像の縦中央に配置する

Swiper.jsなどスライダー系の前後の矢印ボタンを「画像の縦中央に配置したい」という場面は結構あると思います。

今回はその方法を解説します。

今回紹介する内容は、以下のように「画像に対しての縦中央に矢印を配置する」です。

青枠の「スライダー全体に対しての縦中央に矢印を配置する」のは簡単ですが、画像に対しての場合は少し複雑です。

また、画像以外のテキストなどの高さは各アイテムで違っても問題ないです。

サンプルコード

https://codepen.io/dadada-dadada/pen/ZEeMWdY

See the Pen
Swiper.js 矢印アイコン 画像縦中央配置 by dadada (@dadada-dadada)
on CodePen.

解説

対応方法はとてもシンプルで、矢印の要素をpositionで配置して、topは0、そしてmargin-topの値で位置を制御します。

上記のように、画像の上辺から矢印の上辺までの距離を%で取得できれば、縦中央配置できます。

topではなくmargin-topで位置を調整しているのは、margin-topを使うと親要素の横幅に対して%が計算されるからです。

画像の上辺から矢印の上辺までの距離（%）は以下のように求めます。

画像の高さの半分 - 矢印要素の高さの半分

これらをさらに深堀りすると、

画像の高さの半分 = 画像の高さ / 2
画像の高さ = 画像の横幅 * 縦横比％（縦横比が3:4なら * 0.75）
画像の横幅 = (100% - 各画像の余白の合計値) / 画像の枚数

こうなります。

最終的な計算式は以下の通りです。

画像の上辺から矢印の上辺までの距離（%） =
(100% - 各画像の余白の合計値) / 画像の枚数 * 縦横比％ / 2 - 矢印要素の高さの半分の値

これを、cssに変換してみましょう。（数値はサンプルのコードを前提に指定しています）

margin-top: calc(92% / 3 * 0.7 / 2 - 20px)

92%は余白の合計を引いた%、3 * 0.7 / 2は画像の枚数 * 縦横比% / 2、20pxは矢印要素の高さの半分の値です。

結論

「矢印要素」に対して以下CSSを指定する。

• position: absolute
• top: 0
• margin-top: calc(計算式)　※計算式はひとつ上の項で解説

「画像」の縦横比を固定する。固定する方法は以下の通りです。

• CSSで固定　※ひとつ上の項で簡単に解説しています
• 画像ファイルの縦横比の比率を全部統一させる