拖动时同步轮播

Question

我在一个页面中有两个轮播滑块，我使用slick来制作滑动事件，我希望当你滑动一个轮播时，另一个轮播也会滑动。 我已经做到了，但是有一个细节可以很好地实施。 首先看看这个小提琴：

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');
    }

  });    
});

我希望当您在旋转木马中拖动幻灯片时，另一个旋转木马也会进行相同的拖动并 100% 同步。

我已经查看了 slick 文档，但我没有找到任何可以执行此操作的方法，因此如果您知道任何解决方案（即使使用其他库），我也想阅读它。

Answer 1

最后，我改变了 slick.js 库，将拖动动画的功能应用于两个滑块，而不仅仅是具有焦点的滑块，就像@julo0ss 在他的评论中建议的那样。

这是小提琴： http : //jsfiddle.net/eqreem8m/21/

现在我将解释我所做的，基本上有一些行，库最初将转换和过渡属性应用于当前滑块，存储在 _.$slideTrack 变量中。

为了获得同步滑块，我将 _.$slideTrack.css({...}) 更改为 $('.slick-track').css({...})。 我这样做的方法和行：

注意： .slick-track 是 Slick 引入的一个包裹幻灯片的元素

Slick.prototype.animateSlide

当您放下幻灯片时，此函数执行最终过渡。

第325行

原来的：

_.$slideTrack.css(animProps);

同步：

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

Slick.prototype.applyTransition

此函数将 css 过渡属性应用于滑块

360线

原来的：

_.$slideTrack.css(transition);

同步：

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

Slick.prototype.disableTransition

此函数从滑块中删除 css 过渡属性

828线

原来的：

_.$slideTrack.css(transition);

同步：

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

Slick.prototype.setCSS

此函数将 css 变换属性应用于滑块，在您拖动幻灯片时调用它

第1541行

原来的：

_.$slideTrack.css(positionProps);

同步：

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

我确信有更好的方法可以做到这一点，更改库代码不是一个好习惯。 所以随时改进它:)