2015-05-04 34 views
2

我有一个网页在两次旋转木马滑块,我使用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%同步。

我看了一下华而不实的文档,但我没有发现任何要做到这一点,因此,如果您知道任何解决方案(即使有其他图书馆),我想读它。

+1

必须在您的js文件(光滑)中的某个位置执行此项工作(您应该查找可让您的“滑块”从左向右移动的代码或拖动时从右到左)。只需编辑它并将这个函数同时应用于这两个元素,而不仅仅是一个...查看slick.js代码,看起来像LINE 2130应该可以帮助你... – Julo0sS

+1

如果你想要“handjob”,只需要看看这个,应该可以帮助你找到一种方法来处理你的“拖动”事件;):http://stackoverflow.com/questions/4127118/can-you-detect-dragging-in-jquery – Julo0sS

+0

感谢你的想法,我终于实现了将这个函数应用到两个滑块上,就像你所建议的那样:)我将在后面的代码中解释它。 – Sogeking

回答

2

最后我实现它改变slick.js库,应用该拖动动画到两个滑块,而不是仅仅为重点,如@ julo0ss在他的评论暗示滑块功能。

这里是小提琴: http://jsfiddle.net/eqreem8m/21/

,现在我会解释我做什么,基本上有图书馆在哪儿原来适用的转型和过渡性质当前滑块的一些线路,存储在_。 $ slideTrack变量。

为了获得同步的滑块,我已经改变了_。$ slideTrack.css({...}),以$( '光滑通道')。CSS({...})。的方法和其中我这样做行:

注:.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