【Swiper×React】サムネイル付きのスライダーを作成する

当記事では、swiper.jsとReactを使用してサムネイル付きのスライダーを作成する方法についてデモ付きで解説します。
swiper.jsのオプションを使用して二つのスライダーを連動させることで実現します。

①メインのSwiperスライダーを作成
②サムネイル用のスライダーを作成
③メインスライダーとサムネイルを連動させる
④サムネイルに枠線とホバースタイルをつける
ソースコード全文

①メインのSwiperスライダーを作成

npm i swiper@8

ナビゲーションとループだけつけておきます。
画像はサムネイルの方でも同じものを使うので配列で持っておきます。

import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation } from 'swiper'
import 'swiper/css/navigation'
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    const images = [
        '/img/sample1.png',
        '/img/sample2.png',
        '/img/sample3.png',
    ];
    return (
        <>
            <Swiper
                loop={true}
                modules={[Navigation]}  
                navigation
            >
                {images.map((src, idx) => <SwiperSlide key={idx}><img src={src} /></SwiperSlide>)}
            </Swiper>
        </>
    )
}

.swiper {
    width: 70%;
}
.swiper img {
    width: 100%;
    vertical-align: bottom;
}

メインのスライダーができました。

②サムネイル用のスライダーを作成

サムネイル用のスライダーなので、矢印もドットもいりません。
slidesPerViewには表示したいサムネイルの数を設定します。

<Swiper
    slidesPerView={3}     
>
    {images.map((src, idx) => <SwiperSlide key={idx}><img src={src} /></SwiperSlide>)}
</Swiper>

見た目はいい感じになりましたが、メインスライダーとサムネイルはまだ連動していません。

③メインスライダーとサムネイルを連動させる

二つのスライダーを連動させるには以下の二つを行う必要があります。

useStateを使用してサムネイルを参照できる状態にする
thumbsオプションで紐づけを行う

useStateを使用してサムネイルを参照できる状態にする

import { useState } from 'react'  // 追加

export default function SampleSlider() {
  const [thumbs, setThumbs] = useState(null)  // 追加
  .
  .
  .
}

<Swiper
    slidesPerView={3}     
    onSwiper={setThumbs}  // 追加
>
    {images.map((src, idx) => <SwiperSlide key={idx}><img src={src} /></SwiperSlide>)}
</Swiper>

thumbsオプションで紐づけを行う

import { Navigation, Thumbs } from 'swiper' // 修正

<Swiper
  loop={true}
  modules={[Navigation, Thumbs]}                                  // 修正
  thumbs={{swiper: thumbs && !thumbs.destroyed ? thumbs : null}}  // 追加
  navigation
>
  {images.map((src, idx) => <SwiperSlide key={idx}><img src={src} /></SwiperSlide>)}
</Swiper>

メインスライダーとサムネイルが連動しました！
サムネイルをクリックするとメインスライダーが動くと思います。

④サムネイルに枠線とホバースタイルをつける

thumbsオプションを使用するとサムネイルに自動でクラスが付与されるので、それを使用して枠線とホバースタイルをつけることができます。

.swiper-thumbs{
    cursor: pointer;
}
.swiper-slide-thumb-active{
    outline: 2px solid #000;
    outline-offset: -2px;
}

いい感じになりました！

ソースコード全文

最後にソースコードを全文載せておきます。

npm i swiper@8

import { useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Thumbs } from 'swiper'
import 'swiper/css/navigation'
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    const [thumbs, setThumbs] = useState(null)
    const images = [
        '/img/sample1.png',
        '/img/sample2.png',
        '/img/sample3.png',
    ];
    return (
        <>
            <Swiper
                loop={true}
                modules={[Navigation, Thumbs]}  
                thumbs={{swiper: thumbs && !thumbs.destroyed ? thumbs : null}}
                navigation
            >
                {images.map((src, idx) => <SwiperSlide key={idx}><img src={src} /></SwiperSlide>)}
            </Swiper>
            <Swiper
                slidesPerView={3}     
                onSwiper={setThumbs}
            >
                {images.map((src, idx) => <SwiperSlide key={idx}><img src={src} /></SwiperSlide>)}
            </Swiper>
        </>
    )
}

.swiper {
    width: 70%;
}
.swiper img {
    width: 100%;
    vertical-align: bottom;
}
.swiper-thumbs{
    cursor: pointer;
}
.swiper-slide-thumb-active{
    outline: 2px solid #000;
    outline-offset: -2px;
}

以上、swiper.jsとReactを使用してサムネイル付きのスライダーを作成する方法でした。