Navigation on thumb slider doesn't work well

[warudin]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-thumbs-gallery-forked-bpv8b4?file=/index.html

Bug description

When adding navigation arrows to a thumb-slider, they don't fully function as expected. There's some slider functionality, but the 'thumb' functions don't seem to be working.

Expected Behavior

When pressing an arrow in the thumb slider I expect:

• the thumb-slider to slide to the next slide;
• the main-slider to slide to the next slide;

Actual Behavior

When pressing an arrow in the thumb slider the following happens:

• the thumb-slider slides to the next slide (which is good);
• the 'swiper-slide-thumb-active' class is not transferred to the newly active slide (which is not good);
• the main-slider does not respond to the slide change from the thumb slider;

Swiper version

8.0.7

Platform/Target and Browser Versions

macOS, Windows, Android

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[Richard-08]

@warudin Hi! You can add a slide change listener to the thumb-slider. For example - https://codesandbox.io/s/swiper-thumbs-gallery-forked-v7bc5s?file=/index.html

[warudin]

Hi @Richard-08, thanks for providing a solution! We're very happy with this.

although this solves the problem, shouldn't it be working out of the box without such an addition?

[Richard-08]

@warudin It doesn't work out of the box. In fact, navigation for the thumb-slider now works the same way as for the main-slider. Another solution might be to leave only the main-slider's navigation and position it next to the thumb-slider.

[RodrigoTomeES]

Hi, anyone has this issue with the thumb-slider? #4748

[Richard-08]

@RodrigoTomeES Hi! One of the possible solutions - https://codesandbox.io/s/bug-swiper-forked-yr1xyj?file=/src/Components/Slider/Slider.js Changed methods onNextSlide and onPrevSlide.

[RodrigoTomeES]

@Richard-08 amazing thanks!

[simonlayfield]

@warudin Hi! You can add a slide change listener to the thumb-slider. For example - https://codesandbox.io/s/swiper-thumbs-gallery-forked-v7bc5s?file=/index.html

The one issue I have found with this is that there's no way to navigate to the last X number of slides using the thumbs navigation. As soon as the last thumb slide is in view, it disappears (or is disabled). Clicking on those thumbnails does update the slider as expected, but then clicking on the previous arrow causes it to jump back to the first of the hidden slides.

It's almost got me to where I need it. Is there a way to ensure that the navigation is only disabled when navigating to the last slide in thumbs, and not when the last slide is in view? I've made a few hacky attempts at re-enabling the navigation at the point it gets disabled, but no luck so far.

Thanks for getting me this far, anyway.

[arcs-]

This appears to be solved in version 8.4.4

[warudin]

I don't really see any difference when using the navigation buttons in the thumbnail-slider when using version 8.4.4.

The sliding process does work, but the main slider isn't changing accordingly.

[rabi-jollycommerce]

I am having same issue, when thumb is clicked, there is no response and main slide does not appear.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.