Zenn
📚

Swiper React ComponentsとonClickイベントを使用してスライド機能を作成してみた

2022/05/29に公開
React
#
スライド
#
swiper
tech

今回は、自分がReactでスライド機能を作成しようと思った際に、Reactでスライドを作成するための情報が、以外と情報が少ないと感じため、こちらの記事を書かせて頂きました。
具体的には、React用のSwiper.jsとReactのonClickイベントを合わせてスライド機能を作成する方法をサンプルコードを用いてご紹介させて頂きます。

まず初めに公式ドキュメントを参考にswiperをインストールします。（https://swiperjs.com/react）

npm i swiper

以下がデモ用のサンプルコードです。

import React, { useRef } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import "./styles.css";

export default function App() {
  const changeSlide = (index) => {
    if (swiperRef.current && swiperRef.current.swiper) {
      swiperRef.current.swiper.slideTo(index)
    }
  };

  const swiperRef = useRef(null);

  const slideList = [
    {index: 0, title: 'スライド1', imgSrc: 'https://picsum.photos/300/200', imgAlt: 'サンプル画像1'},
    {index: 1, title: 'スライド2', imgSrc: 'https://picsum.photos/300/200/?blur=2', imgAlt: 'サンプル画像1'},
    {index: 2, title: 'スライド3', imgSrc: 'https://picsum.photos/seed/picsum/300/200', imgAlt: 'サンプル画像3'},
  ];
  
  return (
    <>
      <Swiper
        ref={swiperRef}
        initialSlide={slideList[0].index}
        slidesPerView={1}
        simulateTouch={false}
      >
        {slideList.map((slideItem) => (
          <SwiperSlide key={slideItem.index}>
            <div>{slideItem.title}</div>
            <img src={slideItem.imgSrc} alt={slideItem.imgAlt} />
          </SwiperSlide>
        ))}
      </Swiper>
      {slideList.map((slideItem) => (
        <div key={slideItem.index}>
          <button onClick={() => changeSlide(slideItem.index)}>{slideItem.title}へ移動</button>
        </div>
      ))}
    </>
  );
}

上記のコードで行っていることの大枠内容は以下になります。

  • Swiperの機能をimportする
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import "./styles.css";
  • ReactのuseRefを使用し、スライド情報を取得する
const swiperRef = useRef(null);
・・・
<Swiper
  ref={swiperRef}
  initialSlide={slideList[0].index}
  slidesPerView={1}
  simulateTouch={false}
>

ちなみに上記で使用しているswiperオプションのsimulateTouchには、スライド本体の要素をクリックした際にスライド移動するデフォルトの挙動を制御するためにfalseを指定しています。個人的にはこちらはお好みで良いかと思います。

  • スライド移動するための関数を用意する
const changeSlide = (index) => {
  if (swiperRef.current && swiperRef.current.swiper) {
    swiperRef.current.swiper.slideTo(index)
  }
};
  • 要素対してに上記の関数を呼び出すためのイベントをセットする
<button onClick={() => changeSlide(slideItem.index)}>{slideItem.title}へ移動</button>

短い内容ではございましたが、今回の紹介は以上とさせて頂きます。
最後まで拝読頂きありがとうございました。

参考資料

https://swiperjs.com/react
https://picsum.photos/

Discussion