Slick Slider: создание слайдера сравнения - PullRequest
Новая
       33

Slick Slider: создание слайдера сравнения

2 голосов
/ 28 апреля 2020

Я создаю ползунок сравнения.

Идея состоит в том, что у меня есть два ползунка рядом друг с другом с одинаковыми элементами в каждом.

Затем я фильтрую ползунки на основе того, что каждый показывает. Таким образом, вы можете просматривать оба ползунка, даже не видя соответствующих элементов.

Это то, что у меня есть до сих пор:

Codepen: https://codepen.io/flinch85/pen/MWaordK

$('.slider-1').slick({
  dots: false,
  arrows: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  easing: 'ease'
});

$('.slider-2').slick({
  dots: false,
  arrows: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  easing: 'ease',
  initialSlide: 1
});


 $('.slider-1').on('beforeChange', function () {
     $(this).slick('slickUnfilter');
   var otherIndex =  $('.slider-2 .slick-active').attr('data-slick-index');
   $(this).slick('slickFilter', 'div:not([data-slick-index="'+ otherIndex +'"])');
 });


 $('.slider-2').on('beforeChange', function (event, slick, slides, currentSlide, nextSlide) {
   $(this).slick('slickUnfilter');
   var otherIndex =  $('.slider-1 .slick-active').attr('data-slick-index');
   $(this).slick('slickFilter', 'div:not([data-slick-index="'+ otherIndex +'"])');

 });

Это работает, за исключением того, что при первом скольжении второго слайдера он возвращается к тому же слайду. А при перемещении противоположного ползунка и возврате он будет повторять тот же слайд при первом движении.

Я попытался переместить функцию slickUnfilter в beforeChange и slickFilter, чтобы получилось afterChange. Это работает, но портит анимацию, так как следующий элемент изменяется только после того, как произошел слайд.

1 Ответ

0 голосов
/ 28 апреля 2020

используйте это otherIndex+1 внутри функции beforeChange

otherindex по-прежнему относится к текущему элементу

$('.slider-1').on('beforeChange', function () { $(this).slick('slickUnfilter'); var otherIndex = $('.slider-2 .slick-active').attr('data-slick-index'); $(this).slick('slickFilter', 'div:not([data-slick-index="'+ otherIndex+1 +'"])'); });

https://codepen.io/vkv88/pen/OJygEgK?editors=1010

...