Synchronized carousels while dragging

Question

I have two carousel sliders in a page, I'm using slick to make the swipe event and I want that when you swipe one carousel, the other carousel swipes too. I've achieved that, but there is a detail that would be great to implement. First look at this fiddle:

http://jsfiddle.net/eqreem8m/1/

$(document).ready(function(){
  $('.slider').slick({
  });

  // On swipe event
  $('.slider').on('swipe', function(event, slick, direction){
    var current = $(this).attr('data-slider');
    if (direction=='left') {
        $('.slider:not([data-slider=' + current + '])').slick('slickNext');
    } 
    else if (direction == 'right') {
        $('.slider:not([data-slider=' + current + '])').slick('slickPrev');
    }

  });    
});

I'd want that when you are dragging a slide in a carousel, the other carousel do that same dragging and be 100% synchronized.

I've had a look at the slick documentation but I didn't find anything to do this, so if you know any solution (even with other library) I'd want to read it.

there must be, somewhere in your js file (slick), a piece of code that does this job (you should look for a code that makes your 'slider' moving from left to right or right to left when dragging). Just edit it and apply the function to both elements at the same time instead of just one... look in slick.js code, something that looks like LINE 2130 should help you... — Julo0sS, May 04 '15 at 12:22
If you want "handjob", just have a look at this, that should help you find a way to handle your "dragging" event ;) : http://stackoverflow.com/questions/4127118/can-you-detect-dragging-in-jquery — Julo0sS, May 04 '15 at 12:22
Thanks for the ideas, i've finally achieved it applying the function to both sliders like you suggested :) I'll put the code explaining it later. — Sogeking, May 04 '15 at 21:28

score 2 · Accepted Answer · answered May 04 '15 at 21:57

Finally I achieved it changing the slick.js library, applying the function that animate the dragging to both sliders instead of just the slider with the focus, like @julo0ss suggested in his comment.

Here is the fiddle: http://jsfiddle.net/eqreem8m/21/

And now i'll explain what I did, basically there are some lines where the library originally applies the transformation and transition properties to the current slider, stored in the _.$slideTrack variable.

To obtain the synchronized sliders, i've changed the _.$slideTrack.css({...}) to $('.slick-track').css({...}). The methods and lines where I did this:

Note: .slick-track is an element that Slick introduces wrapping the slides

Slick.prototype.animateSlide

This function performs the final transition when you drop the slide.

Line 325

Original:

_.$slideTrack.css(animProps);

Sync:

$('.slick-track').css(animProps);

Slick.prototype.applyTransition

This function applies the css transition properties to the sliders

Line 360

Original:

_.$slideTrack.css(transition);

Sync:

$('.slick-track').css(transition);

Slick.prototype.disableTransition

This function removes the css transition properties from the sliders

Line 828

Original:

_.$slideTrack.css(transition);

Sync:

$('.slick-track').css(transition);

Slick.prototype.setCSS

This function applies css transform properties to the sliders, it's called while you are dragging the slide

Line 1541

Original:

_.$slideTrack.css(positionProps);

Sync:

$('.slick-track').css(positionProps);

I'm sure that there are better ways to do it, and changing the library code is not a good practice. So feel free to improve it :)

Good Job man :) maybe you should post your code on the slick.js page to share your idea with them ;) — Julo0sS, May 05 '15 at 06:18

Synchronized carousels while dragging

1 Answers1