swiperスライダーで前後の矢印を外に出す方法

swiperスライダーで内包されてる前後の矢印を外に出したい。

本記事ではこのような悩みを解決します。

実装サンプル

See the Pen
swiper スライダー矢印外に出す by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

スライダーのコンテンツより外に矢印がでています。

実装手順は以下の通りです。

swiperスライダーのHTML要素を修正。矢印要素を移動する

<!--スライダー要素を親要素で囲う -->
<div class="swiper-parent">
  <!-- Slider main container -->
  <div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">
        <img src="https://placehold.jp/200x100.png" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/200x100.png" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/200x100.png" alt="" />
      </div>
      ...
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-scrollbar"></div>
  </div>
  <!-- 矢印をスライダー要素の外に出す -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

矢印を外に出したいスライダー要素に親要素を追加（本記事では例としてswiper-parent）します。

矢印の要素をスライダー要素から外に出し、且つ先ほど追加した親要素の中に入れます。

CSSで矢印を調整

/*親要素にposition: relative;を追加*/
.swiper-parent {
  position: relative;
}

前章で追加した親要素にpostion: relative;を追加します。

上記親要素を基準に矢印が配置されるようになり、スライダー要素の外に移動します。

以上で実装完了です。

まとめ

swiperスライダーで内包されてる前後の矢印を外に出す方法について紹介しました。

以上で解説を終わります。

swiperスライダーで前後の矢印を外に出す方法

実装サンプル

swiperスライダーのHTML要素を修正。矢印要素を移動する

CSSで矢印を調整

まとめ

関連記事