search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.34k stars 5.88k forks source link

How to prevent thumb slider scrolling when thumb count <= slidesToShow? #3903

Open h4mpy opened 4 years ago

h4mpy commented 4 years ago

We have 2 synced sliders with infinite = false When thumb count is less or equal slidesToShow, thumb slider doesn't work correctly and scrolling away

====================================================================

https://jsfiddle.net/h4mpy/vsw4othf/ - 1.8.1 https://jsfiddle.net/h4mpy/uyce8t6q/ - 1.9.0

maurice-mf commented 4 years ago

I have found some better results by disabling the asNavFor option on the main ('.slider-for' on your example).

It doesn't 100% solve your problem, but it's at least not breaking designs.

trimedia commented 4 years ago

I had to fix this recently (last night). What's causing it is the "transform: translate3d(-184px, 0px, 0px);" that is added via javascript to the "slick-track". Not sure where the code is that's adding it to the slick-track but having the CSS set it to "transform: translate3d(0, 0, 0);" does the trick. If that code had a check in place that would be ideal.

Created 2 new fiddles with the CSS override applied.

https://jsfiddle.net/xruvd20p/ - 1.8.1 https://jsfiddle.net/2v15wxry/ - 1.9.0

SharakPL commented 3 months ago

I had to fix this recently (last night). What's causing it is the "transform: translate3d(-184px, 0px, 0px);" that is added via javascript to the "slick-track". Not sure where the code is that's adding it to the slick-track but having the CSS set it to "transform: translate3d(0, 0, 0);" does the trick. If that code had a check in place that would be ideal.

Unfortunately it's not a good solution. It only works when there's not enough items to fill the slick-list. Otherwise it brakes the carousel and prevents user from accessing all the items because transform3d is used to slide those items into view so it can't be overridden like that.