【React】SwiperのNavigationボタンで自作のものを使用したい

概要

Swiperは、カルーセルなどのスライダーを実装するためのライブラリです。クリック操作でスライドを移動する時に使用するのがNavigationなのですが、標準で用意されているものとは別に自作のものを使用したい場合、どう実装するかのメモです。

前提

Reactを使用する前提とします。今回使用したSwiperのバージョンは10.0.4です。

対応方針

• [swiper/react] Custom navigation/pagination components using React refs not working/possibleの、GitHubのissueに色々対応方法が紹介されています。個人的にはこちらのコメントにある通り、Swiperのrefを取得して前後の移動を呼び出せば良さそうな感じがしました。
• 現在のスライドの位置はReactでSwiperを使って実装時につまづいたことの記事を参考に、stateでactiveIndexを管理して判断します。

実装サンプル

Navigationボタンをbuttonタグにして、以下のように表示する実装です。

import { useRef, useState } from "react";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

function App() {
  const swiperRef = useRef();
  const [activeIndex, setActiveIndex] = useState(0);

  const updateActiveIndex = (swiper) => {
    setActiveIndex(swiper.activeIndex);
  };

  return (
    <div>
      <div
        style={{
          textAlign: "center",
          marginTop: "80px",
          marginLeft: "80px",
          display: "flex",
          width: "800px",
        }}
      >
        <button
          onClick={() => swiperRef.current?.slidePrev()}
          disabled={activeIndex === 0}
        >
          Prev
        </button>
        <Swiper
          spaceBetween={10}
          slidesPerView={3}
          onBeforeInit={(swiper) => {
            swiperRef.current = swiper;
          }}
          onSlideChangeTransitionEnd={updateActiveIndex}
        >
          <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>
        <button
          onClick={() => swiperRef.current?.slideNext()}
          disabled={activeIndex === 3}
        >
          Next
        </button>
      </div>
    </div>
  );
}

export default App;