拖动时同步轮播

Synchronized carousels while dragging

我在一个页面中有两个旋转木马滑块,我正在使用 slick 进行滑动事件,我希望当您滑动一个旋转木马时,另一个旋转木马也会滑动。我已经做到了,但是有一个细节非常适合实施。先看这个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');
    }

  });    
});

我希望当您在旋转木马中拖动幻灯片时,另一个旋转木马也执行相同的拖动操作并且 100% 同步。

我查看了精巧的文档,但没有找到任何解决方法,所以如果您知道任何解决方案(即使是其他库),我也想阅读它。

最后我实现了它更改 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);

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