Question

我在页面中有两个旋转木马滑块，我正在使用slick来制作滑动事件，我想要在刷一个旋转木马时，另一个旋转木马滑动。我已经实现了这一点，但有一个细节可以很好地实现。首先看看这个小提琴：

$(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％同步。

我看过光滑的文档，但我没有找到任何要做的事情，所以如果你知道任何解决方案（即使是其他库），我也想阅读它。

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

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

拖动同步旋转木马

1 个答案: