Thumbnail Navigation Issue With Click Events.

[Vinsanity]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 4.4.6.

• Platform/Target and Browser Versions: macOS, Windows, IOS, ANDROID

• Live Link: http://idangero.us/swiper/demos/300-thumbs-gallery.html

What you did

You can see my interaction pattern with your demo here: http://p.tri.be/l7Lv4d (this was performed in MacOS 10.14.2 and Chrome 71.0.3578.98).

Here's the demo currently on your site. http://idangero.us/swiper/demos/300-thumbs-gallery.html

This issue happens with and without centerSlides as well on my local version.

Expected Behavior

When I click on a thumbnail, it should immediately change the slide of the main slider to the index of the clicked thumbnail.

Actual Behavior

When I click on a thumbnail, it takes 2-3 times to trigger click event. It appears that there is something impeding the propagation of click events in thumbnail controlled sliders. However, when I use the next/prev buttons on the main slider, the thumbnails are working fine.

[max-ci]

I think this isn't a bug. In your video I can see that when click doesn't work you are actually dragging the whole slider and this is why it's not working. Because swiper detects click or drag and when you click you move your mouse by for example 1px and swiper think it's dragging, not clicking.

[Vinsanity]

Thanks for the response @max-ci . Please see my comment above in "What you did". On the version I have locally, I am not using centeredSlides and there is no carousel for the thumbnails. The thumbs are static/stationary and this same issue happens.

see: http://p.tri.be/h8fOtj

If you're saying the dragging is the issue, I cannot seem to find an API setting that allows me to disable that all together on thumbs.

[max-ci]

Yeah, I see now, there should be some workaround for that or an option. I'll try to dig into it later.

[max-ci]

There is an treshold option.

If you set it to for example 1000 your slider won't be moving and you will be able to click even if you drag the mouse.

[Vinsanity]

@max-ci That did the trick! Thank you so much.
I was trying allowTouchMove set to false and cycling through the other touch events but as soon as I set centeredSlides to true, it would "break" again.

It was a tad confusing going through those params, but it makes sense now.

Kudos to you my friend!

[tshamz]

I'm having this exact same problem (except my stationary thumbs are vertical) and I cannot for the life of me figure out how setting threshold fixed your problem. Do you set threshold on the thumb slider or the main slider? why would setting this value to anything higher than 0 (the default) help fix this issue?

[Vinsanity]

Hi @tshamz,
You'll set that on the thumbnail slider. By setting the value higher than 0, you're telling swiper that once it recognizes a click, any movement of the mouse during the click is allowed. Same with a touch screen. The 0 refers to the number of pixels your mouse/finger needs to travel in order to cancel the default action. Meaning, if your finger travels 0 pixels, do not process the click and let the user swipe or slide the thumbnail carousel. By setting it to 1000, you're telling the thumbnail that you mouse/finger needs to travel 1000 px in any direction to cancel the click, thereby allowing the click event to process.