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

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


### 手順1
Reactのアプリを作成したら、まずはSwiperライブラリのインストールを行なってください。
```
npm i swiper
```
次に以下のようにライブラリから必要なモジュールなどをインポートしてきます。

```js: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を並べてページネーションを表示させることができます。
```js: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;
```

![スクリーンショット 2024-11-03 16.17.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/de09cdf1-d9bd-ed2c-ba93-985a4c36abdf.png)
※クリックすると大きく表示できます。

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

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

```js: 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の公式ドキュメントにありましたので、
今後も少しずつ使っていきたいと思います。

https://swiperjs.com/react

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


# JISOUのメンバー募集中！

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

https://projisou.jp/