Written by Kasumi

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スライダーでスライドが切り替わるのを検知。任意の処理を実行する方法

更新日:2023.01.25
3715
Swiper

Swiperのデフォルト矢印を消して、任意の画像に変更する方法

更新日:2022.11.26
6623
Swiper

左右に見え隠れするスライダーを高さ固定で実装する方法【swiperを使用】

更新日:2022.11.25
4529
Swiper

Swiperスライダーで外部の関数から動的にスライド位置を変更する方法

更新日:2022.11.25
6334