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

使用するのは画像スライダーを簡単に実装できる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コードはこちら。

<div class="swiper swiper1">
    <div class="swiper-container swiper-container1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">スライド1</div>
            <div class="swiper-slide">スライド2</div>
            <div class="swiper-slide">スライド3</div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

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

<div class="swiper swiper2">
    <div class="swiper-container swiper-container2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">スライド1</div>
            <div class="swiper-slide">スライド2</div>
            <div class="swiper-slide">スライド3</div>
        </div>
    </div>
    <!-- swiper-containerと同じ階層に移動させる -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

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

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

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

まとめ

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

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