【swiper.js v4】ナビゲーションボタン(矢印)をスライドの隙間の中央に配置する（jQuery）

2022/09/26

[ ID : 8136 ]

シルバー

概要

【jQuery】Swiperのオプション「centeredSlides」で中央寄せにしたスライダーにおいて、ナビゲーションボタン(矢印)をアクティブスライドの左右のスライドの隙間の中央に配置する方法を紹介。

Swiperのオプション「centeredSlides」でアクティブなスライドをセンター寄せにして、ナビゲーションボタン(矢印)をアクティブスライドの左右の隙間の中央に配置する。（PC時）
隙間はSwiperのオプション「spaceBetween」で設定する。
Swiper初期化時とリサイズ時に矢印の位置をJSで計算して自動で設定。
各スライドの幅は同じ。
SP時、スライドは一枚表示にする。（左右にスライドが見切れていない。スライド間の隙間なし）

このコンテンツの続きを閲覧するにはログインが必要です。新規会員登録

ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）