[Swiper×React]How to create thumbnail slider

In this article, we will explain how to create a slider with thumbnails using swiper.js and React.
This will be achieved by utilizing the options of swiper.js to synchronize two sliders.

Table of Contents

①Create the main Swiper slider
②Make slider for thumbnail
③Synchronize the main slider and thumbnails
④Add a border and hover style to the thumbnails
The full text of source code

①Create the main Swiper slider

npm i swiper@8

Let’s add navigation and looping only.
We’ll use the same images for the thumbnails, so we’ll keep them in an array.

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;
}

Now main Swiper slider has been created.

②Make slider for thumbnail

This is a slider for thumbnails, so we don’t need arrows or dots.
Set the slidesPerView to the number of thumbnails you want to display.

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

The appearance looks good, but the main slider and thumbnails are not yet synchronized.

③Synchronize the main slider and thumbnails

To synchronize the two sliders, you need to perform the following two steps.

Use useState to maintain a reference to the thumbnails
Establish the connection using the thumbs option

Use useState to maintain a reference to the thumbnails

import { useState } from 'react'  // added

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

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

Establish the connection using the thumbs option

import { Navigation, Thumbs } from 'swiper' // modified

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

The main slider and thumbnails are now synchronized!
Clicking on a thumbnail should move the main slider.

④Add a border and hover style to the thumbnails

By using the thumbs option, automatic classes are applied to the thumbnails.
Let’s apply borders and hover styles using them.

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

Now it looks good!

The full text of source code

In the end, I put the full text of source code.

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;
}

That is all, it was about how to create a slider with thumbnails using swiper.js and React.