Sync Slider will not sync when dragging the slides from the main slider

[lukaskoeller]

I use the sync slider from slick v1.3.15 and have a problem when I use my mouse to drag the slide for navigating through them. the 'nav-slider' contains names, the 'main-slider' the images. When you click through the 'nav-slider' the several names getting highlighted using css and the class .slick-active. But the class .slick-active didn't change on 'nav-slider' when I navigate 'main-slider' so it's not syncronized anymore. Up to now I just tested by dragging because I don't use arrows oder pignation for navigation.

[kenwheeler]

please provide a jsfiddle.

[lukaskoeller]

http://jsfiddle.net/g4o9edne/20/

If you use the navigation (.name) everything works fine. If you click on one of them, the border-color turns red and the image slider slides to the correct image. If you use the image slider by dragging the slides, the .slick-active doesn't sync , so the red marked name (from .name) stays where it is. (Sorry for bad english)

[lukaskoeller]

And by the way: Why is .slick-active set on every slide of .name (everything is red) when reloading the page? And is there a reason why a sync slider has to own at least one similar element (my jsfiddle wouldn't work if there would be no <h3> inside .image)?

[kenwheeler]

ahh ok. looking into this

[desandro]

You might want to try Flickity. It supports asNavFor like Slick. You can click and swipe on either slider and it'll sync up fine. See demo http://codepen.io/desandro/pen/wByaqj

[natis]

Just checking in to see if there is an update to this issue. Having a similar problem where dragging between slides doesn't add the class of slick-active to the companion carousel.

EDIT: had a co-worker look into the issue and he has more scripting chops than me and he came up with this fix (classes are the ones in my HTML, big one is carousel, small thumbs is in carousel-previews:

$('.carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){ $('.carousel-previews li').removeClass('slick-active'); $($('.carousel-previews li')[nextSlide]).addClass('slick-active'); });

[paultibbetts]

Thanks for the code (from your coworker) @natis , it works for me however each of the thumbnails/previews are set to active on page load for some reason and so this doesn't fully work for me.

Getting around it by setting draggable to false for now.

[jadewelsh]

I've modified the slick.js code to fix this issue for me.

In the "Slick.prototype.slideHandler" function (around line 2119) remove the if statement:

if (.slideCount <= .options.slidesToShow) { return; }

Then farther down (around line 2200), below the ".updateDots();" and ".updateArrows();" add in:

if (.slideCount <= .options.slidesToShow) { _.animating = false; return; }

This worked for me.

[ghost]

Hi,

Can you please look into this?

Thanks.

[leggomuhgreggo]

Updated the fiddle to the master. Looks like this has been fixed. Is there some other issue I'm missing?

[mpmp0]

Updating from 1.5.9 to 1.6.0 fixed it for me.

[mehne]

I can say after intensive testing, that this error still exists in Version 1.6 and 1.8.1