Next.jsでスライダー(スライドショー)を作成するSplideを導入してみた

はじめに

Next.jsでWebサイトを構築していたところ以下サイトにあるようなバナーを自動でスライドショーのように流してくれるような機能を実装したくなりました

調べたところJavaScriptせはSlick、ReactではSplideというのを使うと簡単に実現できるようだったので挑戦したところうまくいかなかったので導入方法をまとめます

問題

以下の方法でNext.jsに導入したところうまくつかうことができませんでした

$ npm install @splidejs/splide

app.tsx

import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';

export default () => {
  return (
    <Splide
      options={ {
        rewind: true,
        gap   : '1rem',
      } }
      aria-label="お気に入りの写真"
    >
      <SplideSlide>
        <img src="image1.jpg" alt="Image 1"/>
      </SplideSlide>
      <SplideSlide>
        <img src="image2.jpg" alt="Image 2"/>
      </SplideSlide>
      <SplideSlide>
        <img src="image3.jpg" alt="Image 3"/>
      </SplideSlide>
    </Splide>
  );
}

導入方法

こちらをいれることによって解決しました

$ npm i splide-nextjs --save

またこのままでは型ファイルがなくエラーになるので、直下に以下のファイルを作ります

$ touch react-splide.d.ts

react-splide.d.ts

declare module "splide-nextjs/react-splide";

あとは同じように利用が可能です

app.tsx

"use client";
import { Splide, SplideSlide } from "splide-nextjs/react-splide";

(省略)

        <Splide
          options={{
            rewind: true,
            width: window.innerWidth / 2,
            perPage: 2,
            type: "loop",
            autoplay: true,
            perMove: 1,
          }}
        >
          <SplideSlide>
            <img src="/bnr1.png" alt="Image 1" className="bnr" />
          </SplideSlide>
          <SplideSlide>
            <img src="/bnr2.jpg" alt="Image 2" className="bnr" />
          </SplideSlide>
          <SplideSlide>
            <img src="/bnr3.jpg" alt="Image 3" className="bnr" />
          </SplideSlide>
          </SplideSlide>
        </Splide>

use clientは必須です

おわりに

CSSで全部実装しようと思うと絶望していたので、このライブラリが利用できて本当に良かったです
ネットにはNext.jsでの使い方がほぼなかったので簡単にまとめてみました
とにかく便利だなと感じました

参考