ReactアプリでUIにスライドを取り入れる方法

はじめに

個人開発をしている中で表示しているカードを横にスライドさせるUIを作りたいと思いどのように実現するか調べていたところ、Swiperというライブラリを使ったYoutubeチュートリアルを見つけて実装をしてみました。
ここでは簡単に実装手順をご紹介したいと思います。

手順1

Reactのアプリを作成したら、まずはSwiperライブラリのインストールを行なってください。

npm i swiper

次に以下のようにライブラリから必要なモジュールなどをインポートしてきます。

Home.jsx

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

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/free-mode";

import { FreeMode, Pagination } from "swiper/modules";

上記の中で下記は必須となりますが、他は使用する機能によってその都度インポートするか決めるといいと思います。

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

import "swiper/css";

手順2

Swiperをreturn文に記載してみる。

以下のようにSwiperを記述することで画像のようにcardを並べてページネーションを表示させることができます。

Home.jsx

const data = ["Card 1", "Card 2", "Card 3", "Card 4"];

const Home = () => {
  return (
    <>
     <Swiper
        breakpoints={{
          340: {
            slidesPerView: 2,
            spaceBetween: 15,
          },
          700: {
            slidesPerView: 3,
            spaceBetween: 15,
          },
        }}
        freeMode={true}
        pagination={{
          clickable: true,
        }}
        modules={[FreeMode, Pagination]}
        className="max-w-[90%] lg:max-w-[80%]"
      >
        {data.map((d) => (
          <SwiperSlide>
            <div style={{ background: "yellow", height: "100px", margin:"50px" }}>{d}</div>
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  )
}

export default Home;

※クリックすると大きく表示できます。

以下の部分でページネーションをクリックすると動くように設定をしているので、ドットの部分をクリックするとカードがスライドしていきます。

        pagination={{
          clickable: true,
        }}

カスタマイズ

マウスでホバーしながらカードを動かしたい場合は、コードにMouseWheelモジュールを追加すると簡単に変更できます。

diff_HTML: Home.jsx

import React from 'react'

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

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/free-mode";

- import { FreeMode, Pagination } from "swiper/modules";
+ import { FreeMode, Pagination, Mousewheel  } from "swiper/modules";

const data = ["Card 1", "Card 2", "Card 3", "Card 4"];

const Home = () => {
  return (
    <>
     <Swiper
        breakpoints={{
          340: {
            slidesPerView: 2,
            spaceBetween: 15,
          },
          700: {
            slidesPerView: 3,
            spaceBetween: 15,
          },
        }}
        freeMode={true}
        pagination={{
          clickable: true,
        }}
-       modules={[FreeMode, Pagination]}
+       modules={[FreeMode, Pagination, Mousewheel]}
        className="max-w-[90%] lg:max-w-[80%]"
      >
        {data.map((d) => (
          <SwiperSlide>
            <div style={{ background: "yellow", height: "100px", margin:"50px" }}>{d}</div>
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  )
}

export default Home;

おわりに

上記で紹介したモジュール以外にも便利で使えそうなモジュールがSwiperの公式ドキュメントにありましたので、
今後も少しずつ使っていきたいと思います。

皆様の参考になれば幸いです！

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼