Swiper Thumbs Gallery Loop - making issue for thumbs & onSwiper

[dhavalveera]

Hello,

<Swiper loop={true}  spaceBetween={10} autoplay={{ delay: 3000 }} rewind={true} thumbs={{ swiper: thumbsSwiper }} modules={[Autoplay, FreeMode, Thumbs]} className="mySwiper2" >
     <SwiperSlide>...</SwiperSlide>
</Swiper>

<Swiper loop={true} slidesPerView={3} spaceBetween={25} freeMode={true} watchSlidesProgress={true} modules={[ Autoplay, FreeMode, Navigation, Thumbs ]} className="mySwiper" autoplay={{ delay: 3000 }} rewind={true} >
    <SwiperSlide>...</SwiperSlide>
</Swiper>

then in my Nextjs Web App, it's following the below error.

please help me

[aso1datov]

This is because thumbsSwiper has not been initialized yet.

Try this:

thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}

[dhavalveera]

@aso1datov == Thanks, your solution is working now...

I've one more thing to ask when an Image is active on both the sliders, then in the Thumbs Slider (2nd slider) I want to show some Icon on the Image for one which one is active/selected, can you able to help me how it's possible?

[aso1datov]

Try this:

.swiper-slide-thumb-active img  {
    /* your styles */
}

[dhavalveera]

as I am using in Next.js, so that'll be in global CSS, right?

[dhavalveera]

@aso1datov - I tried but it's not working...

[aso1datov]

Check if your styles are overwritten by inline css.

In my case I did it like this:

.thumbnails {
  :global(.swiper-slide-thumb-active)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #3772ff;
    pointer-events: none;
    z-index: 1;
  }
}

.thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

 <Swiper
  className={styles.thumbnails}
  spaceBetween={8}
  slidesPerView={6}
  threshold={5}
  modules={modules}
  onSwiper={setThumbsSwiper}
  freeMode={true}
  watchOverflow={true}
  watchSlidesProgress={true}
>
  {game.screenshots.map((cover) => (
    <SwiperSlide key={cover}>
      <div className={styles.thumbnail}>
        <Image
          src={cover}
          alt={game.title}
          layout="fill"
          objectFit="cover"
          objectPosition="center"
        />
      </div>
    </SwiperSlide>
  ))}
</Swiper>

[dhavalveera]

NO, I am not overriding any CSS Codes for <Swiper> as well as for <SwiperSlide>

in your case, as in .thumbnails for CSS, inside of .thumbnais {} you're writing global, so that's with CSS3 or with SCSS/SASS?

[aso1datov]

It's css-modules feature

[dhavalveera]

@aso1datov --- the CSS code you wrote above, I tried the same here in my local, but it's not working

[Chandra-Sekhar-Korni]

@aso1datov ---- I am using a thumb swiper slider, my requirement is I have 30 images and I click the 3rd Image and the 3rd Image has to display without sliding other Images. I am stuck with an issue can you Help us?

[nolimits4web]

Swiper v9 comes with fully reworked and now different loop functionality. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.