【Swiper】スライドを自前の要素(ボタンなど)で制御する

コンポーネントがスライド表示されるされるようにしたいな〜と自作サービスにSwiperを導入することにしました。Swiperのデフォルトではナビゲーション(スライダーを制御するための<>などの矢印)がこんな風にスライドの上に重なるように表示されるんですが…

今回はSwiperのデフォルトの矢印ではなく、スライドの外に用意する自前の要素(ボタン)でスライダーを制御できるようにします。

ゴール

環境

  • Next.js : 13.0.7
  • React : 18.2.0
  • Swiper : 8.4.5

方法

ナビゲーションのプラグインの設定を変更すればOK🙆‍♀️

公式ドキュメントにもコードの例が載っている。

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev', 
  },
});

以下の記述の通り、パラメーターnextElに設定した要素は、その要素をクリックすると「次へ」ボタンのように機能します。prevElは同様に「前へ」ボタンのように機能。

コード例

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import styles from "../styles/Sample.module.css";

export default function Sample() {
  return (
    <main>
      <div>
        <Swiper
          className={styles.sliderarea}
          modules={[Navigation]}
          slidesPerView={1}
          navigation={{ nextEl: "#swiper-forward", prevEl: "#swiper-back" }} //要素を指定
          allowTouchMove={false} //ボタンだけで制御するためにドラッグなどでのスライドを禁止
        >
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
          <SwiperSlide>Slide 4</SwiperSlide>
          <SwiperSlide>Slide 5</SwiperSlide>
          <SwiperSlide>slide 6</SwiperSlide>
        </Swiper>
        <div>
          <button id="swiper-back" className="btn"> //このボタンを押したらスライドが次のものへ
            もどる
          </button>
          <button id="swiper-forward" className="btn"> //このボタンを押したらスライドが前のものへ
            つぎへ
          </button>
        </div>
      </div>
    </main>
  );
}

以下のように自前のボタンでスライドが制御できるように🎉

さいごに

デフォルトで用意された矢印を装飾したり、スライドの外に出す方法は日本語のブログでたくさん見つかったんですが、自前の要素で制御する方法があまりヒットしなかったので書いてみました。イベントハンドラーを登録してごちゃごちゃっとコードを書かないといけないかもな〜と思ってたんですが簡単でびっくり。