拖动时同步轮播

Question

我在一个页面中有两个旋转木马滑块，我正在使用 slick 进行滑动事件，我希望当您滑动一个旋转木马时，另一个旋转木马也会滑动。我已经做到了，但是有一个细节非常适合实施。先看这个fiddle:

$(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 在他的评论中建议的那样。

这是 fiddle： 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);

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

拖动时同步轮播

Synchronized carousels while dragging

javascript

jquery

html

slick.js