公式：https://swiperjs.com/get-started#what-next

公式デモ：https://swiperjs.com/demos#custom-plugin

npm install swiper

必須 import

import Swiper from 'swiper';
import 'swiper/css';

シンプルなスライドの例

• 「スライドを loop させたい」などのオプションも設定できる
• オプションは主に <Swiper> に追加していく

”use client” を忘れないこと

下記のエラーになる

Server Error
Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack

使いそうなやつ

Autoplay

import :

"use client";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { Autoplay } from 'swiper/modules';

Swiper :

<Swiper
        slidesPerView={3}
        className=""
        loop={true}
        modules={[Autoplay]}
        autoplay={{
          delay: 1500,
          disableOnInteraction: false,
        }}
      >
        <SwiperSlide>Slide部分</SwiperSlide>
</Swiper>{" "}

<SwiperSlide>を aタグにする

<SwiperSlide tag="a">

に変更するだけ。

内部のLinkタグは消さないとhydrationエラーに。

使用例：

<SwiperSlide
            tag="a"
            key={}
            className="bg-slate-400 text-center items-center justify-center hover:opacity-70 hover:translate-y-3 text-lg font-mono hover:underline hover:decoration-blue-500 decoration-2"
            href={}
            target="_blank"
          >
            {}
</SwiperSlide>