Reactでスライドショー（カルーセル）を導入してみた

2023.05.26 08:00
2023.05.08 11:40
Reactでスライドショー（カルーセル）を導入してみた

Reactでのスライドショー（カルーセル）にはいろんなライブラリがあるのですが、今回は「react-splide」というのを試してみました。

まずはライブラリをインストールしてみます。

npm install @splidejs/react-splide

インストールしたら、次はライブラリとcssテーマを読み込んでみます。

// ライブラリ読み込み
import { Splide, SplideSlide } from "@splidejs/react-splide";
// デフォルトのテーマ
import "@splidejs/react-splide/css";

その次に、スライド部分を表示します。

      <Splide aria-label="お気に入りの写真">
        <SplideSlide>
          <img src="image1.jpg" alt="Image 1" />
        </SplideSlide>
        <SplideSlide>
          <img src="image2.jpg" alt="Image 2" />
        </SplideSlide>
      </Splide>

これでいくと、2枚の画像がスライドすることになりますね。
通常はここをmapなどで枚数分展開するって感じになると思います。

今回はここを参考にしました。
他にもいろんなオプションがあるみたいですね。
https://ja.splidejs.com/integration/react-splide/

今回は以上です！