Синхронизированные карусели при перетаскивании

Question

У меня есть два карусельных слайдера на странице, я использую 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% синхронизировано.

Я просмотрел документацию, но я ничего не нашел для этого, поэтому, если вы знаете какое-либо решение (даже с другой библиотекой), я бы хотел его прочитать.

Answer 1

Наконец-то я достиг этого, меняя библиотеку slick.js, применяя функцию, которая оживляет перетаскивание на оба ползунка, а не только слайдер с фокусом, как @ julo0ss, предложенный в его комментарии.

Вот скрипка: http://jsfiddle.net/eqreem8m/21/

А теперь я объясню, что я, в принципе есть несколько строк, где библиотека первоначально применяет преобразование и переходные свойства текущего слайдера, хранившиеся в _. $ slideTrack.

Чтобы получить синхронизированные слайдеры, я изменил _. $ SlideTrack.css ({...}) на $ ('. Slick-track'). Css ({...}). Методы и линии, где я сделал это:

Примечание: .slick дорожка является элементом, который вводит Slick оберточной слайды

Slick.prototype.animateSlide

Эта функция выполняет окончательный переход когда вы бросаете слайд.

Line 325

Оригинал:

_.$slideTrack.css(animProps); 

Синхронизация:

$('.slick-track').css(animProps); 

Slick.prototype.applyTransition

Эта функция применяется свойства CSS переходов к ползунков

Line 360 ​​

Оригинал:

_.$slideTrack.css(transition); 

Синхронизация:

$('.slick-track').css(transition); 

Slick.prototype.disableTransition

Эта функция удаляет свойства CSS перехода от ползунков

Line 828

Оригинал:

_.$slideTrack.css(transition); 

Синхронизация:

$('.slick-track').css(transition); 

Slick.prototype.setCSS

Эта функция применяется CSS преобразования свойств ползунков, это называется в то время как вы тянете слайд

Line 1541

Оригинал:

_.$slideTrack.css(positionProps); 

Синхронизация:

$('.slick-track').css(positionProps); 

Я уверен, что есть лучшие способы сделать это, и изменение кода библиотеки не является хорошей практикой. Поэтому не стесняйтесь его улучшить :)