centeredSlides on thumbs

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 6.3.2

• Platform/Target and Browser Versions: macOS

What you did

I’m using Swiper with react. I have main swiper and thumbs for it. I’m trying to center active thumb.

This is the code for main swiper:

<Swiper
    grabCursor
    navigation={{
        nextEl: '.next-btn',
        prevEl: '.prev-btn'
    }}
    onSlideChange={this.handleSlideChange}
    onSwiper={swiper => this.swiper = swiper}
    initialSlide={post.initialSlide}
    threshold={6}
    thumbs={{swiper: this.state.thumbsSwiper}}
>
...
</Swiper>

… And this for thumbs:

<Swiper
    onSwiper={thumbsSwiper => this.setState({thumbsSwiper})}
    watchSlidesVisibility
    watchSlidesProgress
    slidesPerView={12}
    spaceBetween={12}
    threshold={6}
    centeredSlides
    centeredSlidesBounds
>

Expected Behavior

Expected active thumb to be centered if slides > slidesPerView.

Actual Behavior

Now active slide only tries to be visible on screen. It never moves if is visible on screen. It moves only when grabbing.

[JackCA]

I believe I’m trying to solve the same problem and have recreated it here.

What I’d like to happen, is that the active thumbnail is always centered (unless it is the first 2 or last 2 in my above example).

Is there a way to natively achieve this?

[laurabennett]

Is this plugin still maintained? This is still an issue.