拖拽时同步旋转木马

3
我在页面中有两个轮播滑块,我正在使用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');
    }

  });    
});

我希望当你在轮播图中拖动幻灯片时,其他轮播图也会进行相同的拖动并完全同步。

我已经查看了slick文档,但没有找到任何可以实现这一点的内容。如果您知道任何解决方案(即使使用其他库),我想阅读它。


1
你的JS文件(slick)中一定有一段代码可以完成这个工作(你应该寻找一个可以让你的“滑块”在拖动时从左到右或从右到左移动的代码)。只需编辑它并将此函数同时应用于两个元素,而不仅仅是一个...查看slick.js代码,在类似于LINE 2130的位置可能会对你有所帮助... - Julo0sS
1
如果你想要“手动”,只需查看这个链接,它应该能帮助你找到处理“拖动”事件的方法 ;):https://dev59.com/iG855IYBdhLWcg3w0H53 - Julo0sS
谢谢你的建议,我终于实现了将函数应用于两个滑块。稍后我会放上解释代码的内容。 - Sogeking
1个回答

2
最后我通过修改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);

我相信有更好的方法来做这件事,而修改库代码并不是一个好的做法。所以请随意改进它 :)


1
干得好,伙计 :) 也许你应该在 slick.js 页面上发布你的代码,与他们分享你的想法 ;) - Julo0sS

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接