Next.js × Swiperでスライダーをつくる

はじめに

Next.js と Swiper を使ってスライダーをつくった時の個人的備忘録。

開発環境	バージョン
Next.js	13.5.4
TypeScript	5.0.0
Swiper	11.0.3
sass	1.68.0

実装方法

ここでは、基本的なオプション機能であるナビゲーション・ページネーション・オートプレイ・ループの機能をもったスライダーを実装する。

インストール

以下のコマンドで Swiper をインストールする。

npm i swiper@latest

スライダーコンポーネントをつくる

components ディレクトリにスライダーのコンポーネントを作成。
CSS は CSS Modules を使用。

app/components/BasicSlider/index.tsx

import Image from "next/image";

// オプションをインポートする
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import styles from "./index.module.css";

// publicフォルダの画像
const images = [
  "/basicSlider/majo001.jpg",
  "/basicSlider/majo002.jpg",
  "/basicSlider/majo005.jpg",
  "/basicSlider/majo006.jpg",
  "/basicSlider/majo010.jpg",
  "/basicSlider/majo014.jpg",
  "/basicSlider/majo018.jpg",
  "/basicSlider/majo050.jpg",
];

export default function BasicSlider() {
   // ブレイクポイントに基づいて1つのスライドに表示するスライドの数を指定
  const slideSettings = {
    0: {
      slidesPerView: 1.4,
      spaceBetween: 10,
    },
    1024: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
  };

  return (
    <Swiper
      modules={[Navigation, Pagination, Autoplay]}
      breakpoints={slideSettings} // slidesPerViewを指定
      slidesPerView={"auto"} // ハイドレーションエラー対策
      centeredSlides={true} // スライドを中央に配置
      loop={true} // スライドをループさせる
      speed={1000} // スライドが切り替わる時の速度
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }} // スライド表示時間
      navigation // ナビゲーション（左右の矢印）
      pagination={{
        clickable: true,
      }} // ページネーション, クリックで対象のスライドに切り替わる
      className={styles.slideWrapper}
    >
      {images.map((src: string, index: number) => (
        <SwiperSlide key={index}>
          <Image
            src={src}
            width={1920}
            height={1038}
            alt="Slider Image"
            sizes="(min-width: 1024px) 100vw, 60vw"
            className={styles.slideImage}
          />
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

CSS はこちら

app/components/BasicSlider/index.module.css

.slideWrapper {
  max-width: 100%;
}

.slideImage {
  aspect-ratio: 1/1;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .slideImage {
    aspect-ratio: initial;
  }
}

デモサイト

デモサイトはこちら
https://nextjs-swiper-demo.vercel.app/

ソースコードはこちら
https://github.com/H-ymt/nextjs-swiper-demo#readme

ドキュメント

参考にしたドキュメントはこちら
https://swiperjs.com/
https://swiperjs.com/react