拖动时同步轮播

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

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