【Swiper】画像スライダーの矢印ボタンをスライダーの外に出す方法

今回は、「画像スライダーの矢印ボタンをスライダーの外に出す方法」について解説していきます。

使用するのは画像スライダーを簡単に実装できるSwiperです。

案件で矢印ボタンの位置を調整する機会が多いので、Swiperをよく使う人は是非参考にしてください!

※今回はSwiperの導入方法については解説しないので、もし導入方法を知りたい方がいたらこちらの記事を参照してください。

【Swiper】画像スライダーの矢印ボタンを外に出す方法

まずは矢印ボタンがスライダーの内にあるパターンと外にあるパターンを見ていきましょう。

CodePenのサイトをPC画面で見た方が分かりやすいです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

1つ目のスライダーは矢印ボタンが内にあり、2つ目のスライダーは外にあることがわかります。

それでは、2つ目のスライダーのように矢印ボタンをスライダーの外に出す方法を見ていきましょう。

【結論】swiper-containerと同階層にswiper-button-prevとswiper-button-nextを移動させる

結論から言うと、swiper-containerと同階層にswiper-button-prevとswiper-button-nextを移動させたらOKです。

デフォルトのスライダーのHTMLコードはこちら。

そして、矢印ボタンを外に出す場合のHTMLコードはこちら。

ポイントは、swiper-containerと同じ階層にswiper-button-prevとswiper-button-nextを移動させることです。

そうすることで、矢印ボタンがスライダーの外に配置されるようになります。

あとは、好みで矢印ボタンの位置を調整してあげればOK。

まとめ

以上が、「画像スライダーの矢印ボタンをスライダーの外に出す方法」でした。

簡単に出来るので、是非試してみてください。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事