3

ページに 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% 同期されるようにしたいと思います。

洗練されたドキュメントを見てきましたが、これを行うための何かが見つからなかったので、解決策を知っていれば (他のライブラリでも) 読みたいと思います。

4

1 に答える 1

2

最後に、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);

それを行うためのより良い方法があると確信しており、ライブラリコードを変更することは良い習慣ではありません. だから、自由に改善してください:)

于 2015-05-04T21:57:22.907 に答える