はじめに

HTNCodeです。

カルーセル/スライダーを実装するために、Splide.jsを導入してみました。

今回はSplide.jsの良さと実装までの流れを書いていこうかと。

カルーセル/スライダーライブラリの有名どころ

脱jQuery前提であれば、まず候補としてSwiperが上がるかと思います。

公式サイトにも、『The Most Modern Mobile Touch Slider』と表記されている通り、モバイルタッチスライダーとして非常に有名です。

非常に豊富な機能が利用でき、圧倒的な支持を誇っています。

一方で、「一旦は最低限の機能だけあればいい」といった場合であれば、逆にその機能の豊富さからややこしく感じるかもしれません。

https://swiperjs.com/

次に今回採用したSplide.jsはというと、以下のような特徴を持っています。

・何といっても軽い！gzip圧縮後約23KBという軽量ライブラリなので、パフォーマンスの影響を最小限に抑えることが可能です。

・開発が日本発のため、日本語ドキュメントが充実しており、非常にわかりやすいです。

https://ja.splidejs.com/

その他にも多々ありますが、どちらのライブラリも高いパフォーマンスを持ち、カスタマイズ可能で、レスポンシブデザインに対応しています。

より高度な機能を使う必要がある場合はSwiper、より軽量でシンプルに書きたい！といった場合はSplide.jsといった感じかと。

インストール

Splide.jsの導入方法は非常にシンプルです。非常にシンプルです。

・・・2回言いました。笑

公式ドキュメントをご確認いただければ、そのシンプルさが分かるかと。ほんとーに簡単！

今回はNext.js（React）での導入方法として解説していきます。

まず、以下コマンドで、React用のパッケージをインストールしましょう。

$ npm install @splidejs/splide

インストールが終わったら、Splide.jsを実装したいコンポーネントでインポートしてください。

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

CSSをインポート

ここはお好みで。公式ドキュメントから引用。

// デフォルトのテーマ
import '@splidejs/react-splide/css';

// または、ほかのテーマ
import '@splidejs/react-splide/css/skyblue';
import '@splidejs/react-splide/css/sea-green';

// あるいは、コアスタイルのみ
import '@splidejs/react-splide/css/core';

Splideの基本構成

Splide.jsはroot、track、listおよびslideの4つの構成要素から成り立っており、Next.js（React）では以下のように記述することで、

その構成を守ってレンダリングしてくれます。

<Splide aria-label="ラベル名">
  <SplideSlide>
    <img src="image1.jpg" alt="Image 1"/> //これが1つ目のスライド
  </SplideSlide>
  <SplideSlide>
    <img src="image2.jpg" alt="Image 2"/>　//これが2つ目のスライド
  </SplideSlide>
　　… //必要な数だけ足せる（map関数で展開も可能）
</Splide>

上記を使わずに書くこともできますが、適切なラベルを設定する必要があったり、注意点がありますので、詳しくは公式ドキュメントをご覧ください。

https://ja.splidejs.com/guides/structure/

コンポーネントへ実装

"use client";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
import Image from "next/image";
import sampleImage from "@/public/sampleImage.svg"; //サンプル画像
import { NextPage } from "next";

const SplideTest: NextPage = () => {
  return (
    <Splide
      aria-label="siteTopImageSplide"
    >
      <SplideSlide>
        <Image src={sampleImage} alt="sampleImage" />
      </SplideSlide>
      <SplideSlide>
        <Image src={sampleImage} alt="sampleImage" />
      </SplideSlide>
      <SplideSlide>
        <Image src={sampleImage} alt="sampleImage" />
      </SplideSlide>
    </Splide>
  );
};

export default SplideTest;

これだけでコンポーネントを読み込んで使用すれば、最低限の機能が実装できます。　

オプションを指定して自動スクロールを実装

今回は、さらにオプションを指定して自動スクロールを実装します。

オプションは以下のように指定しました。

"use client";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
import Image from "next/image";
import sampleImage from "@/public/sampleImage.svg"; //サンプル画像
import { NextPage } from "next";

const SplideTest: NextPage = () => {
  return (
    <Splide
      aria-label="siteTopImageSplide"
      options={{             //オプションを指定
        type: "slide",
        perPage: 1,
        arrows: true,
        pagination: true,
        autoplay: true,
        speed: 3000,
        direction: "ltr",
        fixedWidth: "100%",
        fixedHeight: "auto",
        rewind: true,
      }}
    >
      <SplideSlide>
        <Image src={sampleImage} alt="sampleImage" />
      </SplideSlide>
      <SplideSlide>
        <Image src={sampleImage} alt="sampleImage" />
      </SplideSlide>
      <SplideSlide>
        <Image src={sampleImage} alt="sampleImage" />
      </SplideSlide>
    </Splide>
  );
};

export default SplideTest;

オプションは他にも色々ありますので、公式ドキュメントをご確認ください。

実際にデモを見ながらコードを確認することもできますので、非常に簡単です。

https://ja.splidejs.com/guides/options/#rewind

おわりに

以上、Splide.jsでのカルーセル/スライダーの実装方法でした。

（ちなみに、もっとリッチな表現を望む場合、『Splide Premium』というthree.jsを使ったトランジションが使えるプランも公開されてます。）

本当に簡単ですよね。細かい部分もっとこだわれば、全然遜色ないものを作り上げることもできるかと。

皆さんもぜひ試してみてください！それではまた。

HTNCode