【Swiper】次へ前へ矢印(ナビゲーションボタン)を外に出し下に移動する方法

Swiperの矢印を下に移動したい
Swiperの枠の外側に移動したいけど、どうしたらいいかな?

この記事ではそんな疑問にお答えします。

この記事を読んでわかること
  • swiperの矢印ボタンを下に移動する方法
  • swiperの矢印ボタンを下に移動する際の注意点

デザインデータを忠実に再現する為に、矢印ボタンの位置を下側にしたいと思ったことはありませんか?

この方法を知っているだけで矢印ボタンの位置は簡単に調整することができます。

これでどんなデザインデータが来ても対応できること間違いなしです!

この記事の著者

web制作エンジニア

伊藤 義尚

2021年よりweb制作の学習を開始し、現在1社と業務提携中

自身が学んだこと、ためになったことを発信しています

もくじ

ページネーション、ナビゲーションボタンなどを外に出す方法

この記事では以下のようなスライダーを作る方法を解説していきます。

See the Pen swiper__custom-nav-btn2 by 伊とう (@ito-the-typescripter) on CodePen.

<div class="swiper-container swiper-container1">
  <div class="swiper swiper1">
    <!-- swiper-wrapper 必須・名称変更不可 -->
    <div class="swiper-wrapper">
      <!-- swiper-slide 必須・名称変更不可 -->
      <div class="swiper-slide">
        <img src="(画像1)" alt="">
      </div>
      <div class="swiper-slide">
        <img src="(画像2)" alt="">
      </div>
      <div class="swiper-slide">
        <img src="(画像3)" alt="">
      </div>
    </div>
  </div> 
  <!-- ページネーション -->
  <div class="swiper-pagination swiper-pagination1"></div>
  <!-- ナビゲーションボタン -->
  <div class="swiper-button-prev swiper-button-prev1"></div>
  <div class="swiper-button-next swiper-button-next1"></div>
</div><!-- /.swiper-container -->

ソースコード

次にソースコードの解説です。

HTML

<div class="swiper-container swiper-container1">
  <div class="swiper swiper1">
    <!-- swiper-wrapper 必須・名称変更不可 -->
    <div class="swiper-wrapper">
      <!-- swiper-slide 必須・名称変更不可 -->
      <div class="swiper-slide">
        <img src="(画像1)" alt="">
      </div>
      <div class="swiper-slide">
        <img src="(画像2)" alt="">
      </div>
      <div class="swiper-slide">
        <img src="(画像3)" alt="">
      </div>
    </div>
  </div> 
  <!-- ページネーション -->
  <div class="swiper-pagination swiper-pagination1"></div>
  <!-- ナビゲーションボタン -->
  <div class="swiper-button-prev swiper-button-prev1"></div>
  <div class="swiper-button-next swiper-button-next1"></div>
</div><!-- /.swiper-container -->

.swiper-containerを外側に追加し、各ボタンは.swiperの外に出します。

CSS

.swiper-container1{
  position: relative;
}

/* 矢印カスタム */
/* 共通設定 */
.swiper-button-prev1,
.swiper-button-next1 {
  height: 50px !important;
  width: 50px !important;
  position: absolute;
  top: 110% !important;
}

/* 矢印を画像に変更するなら必要 */
.swiper-button-prev1::after,
.swiper-button-next1::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "" !important; 
  height: 50px;
  width: 50px;
}

/* 前へ矢印 */
.swiper-button-prev1::after {
  background-image: url('前へ矢印画像');
  transform: scale(-1, 1); /* 次へ矢印の画像を反転して使用する */
}

/* 次へ矢印 */
.swiper-button-next1::after {
  background-image: url('次へ矢印画像');
}

.swiper1-containerposition: relative;
.swiper-button-prev1,.swiper-button-next1position: absolute;を記載します。

これを入れないと、ナビゲーションボタンなどが表示されません。

.swiper-button-prev1,.swiper-button-next1にはheightwidthを記載します。

これがないと、画像サイズが変更できません。

ところどころにある!importantは、swiperのCSSに上書きされるのを防ぐ為に必要です。

JavaScript

こちらは特に重要な記載事項はありません。

const swiper4= new Swiper(".swiper1", {
   loop: true,
  // ページネーションが必要なら追加
  pagination: {
    el: '.swiper-pagination1',
    clickable: true, // ページネーションをクリック可能に
  },
  navigation: {
    nextEl: ".swiper-button-next1",
    prevEl: ".swiper-button-prev1"
  },
});

まとめ

今回はswiperで矢印ボタンを下に移動する方法を解説しました。

皆さんのお役に少しでも立てれば幸いです!

もくじ