How to use SwiperThumbs ?

[teenking]

Dear Sir,
I'm a newbie.
Do you have any example for use SwiperThumbs ?
I'm stuck on it.
Please anyone help me
Thank you

[StikyFingaz]

Hello, after I lost 1/2 day on that, it seems it was simple to set it up but it requires several details in order to have a somewhat working configuration.

On your main swiper add the module and the thumbs config. The other props are optional. If you have multiple slides-per-view you need to set autoScrollOffset to some sane number, otherwise the thumbs swiper won't slide till the last slide. Main swiper:

<Swiper :modules="[SwiperThumbs]" slidesPerView="auto" :centeredSlides="true" :centeredSlidesBounds="true" :spaceBetween="10" class="main-gallery" :thumbs="{ swiper: '.nav-gallery', autoScrollOffset: 3, }" > ... </Swiper>

On your thumbs swiper you just need to add the class you set in your main swiper. Note that you also need the SwiperThumbs module on both swipers. Thumbs swiper:

<Swiper :modules="[SwiperThumbs]" slidesPerView="auto" :centeredSlides="true" :centeredSlidesBounds="true" :spaceBetween="5" :grabCursor="true" class="nav-gallery" > ... </Swiper>

That's it. However, I cannot get the CSS to work. In the demos all thumbs except the active one are dimmed/darker. Maybe this is not included in the CSS bundle? Anyway, I hope that helps.