Пользовательская навигация с скользящим слайдером, не синхронизированным с слайдами карусели

Question

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

Этот пример показывает 4 продукта в карусели. Когда вы пропускаете слайды, навигация над товарами совпадает: Пример

Этот пример показывает 2 продукта. Это клонирование слайдов, чтобы всегда было 3 на экране. Проблема в том, что навигация над продуктами не синхронизируется, когда вы пропускаете: Пример. По сути, когда вы находитесь на клонированных слайдах, когда он пропускает к оригинальным слайдам, навигация возвращается в синхронизацию.

Как я могу заставить это соответствовать?

Вот мой полный код:

    // Category gallery

    // Set preferred slidesToShow
    var slidesToShow = 3; // always 3

    // Clone the slides.
    var $slides = $('.category-gallery .slide');
    if ($slides.length < slidesToShow + 1) {
        var $slide;
        $slides.each( function(){
            $slide = $(this).clone(true)
                .insertAfter( $slide || $slides.last() )
                .addClass('slick-cloned-2')
                .attr('id', '');
        });
    }

    $('.category-gallery').slick({
        dots: false,
        infinite: true,
        slidesToShow: slidesToShow,
        slidesToScroll: 1,
        autoplay: false,
        pauseOnHover:false,
        focusOnSelect: false,
        centerMode:true,
        arrows: true,
    });

    $('a.category-nav[data-slide]').click(function(e) {
        e.preventDefault();
        var slideno = $(this).data('slide');
        $('.category-gallery').slick('slickGoTo', slideno - 1);
    });

    $('a.category-nav[data-slide="1"]').addClass("highlighted-cat-nav");
    $('.category-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
        $('a.category-nav').removeClass('highlighted-cat-nav');
      $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('highlighted-cat-nav');
    });

Кажется, проблема в этой строке:

      $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('highlighted-cat-nav');

Answer 1

Ссылаясь на мой комментарий, проблема, вероятно, потому что data-slide основывается на 1, но currentSlide основано на 0

Во-вторых, мы должны просто использовать currentSlide + 1 при ручном скольжении клонирование не нужно.

Так что измените следующее:

// Clone the slides.
var $slides = $('.category-gallery .slide');
if ($slides.length < slidesToShow + 1) {

к этому:

// Clone the slides.
var $slides = $('.category-gallery .slide'),
    clone_slides = ($slides.length <= slidesToShow),
    slides_count = Math.min($slides.length, slidesToShow);

if (clone_slides) {

Тогда попробуйте это:

$('.category-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
    var i = clone_slides ?
        (currentSlide >= slides_count ? currentSlide - slides_count : currentSlide) + 1 :
        currentSlide + 1;
    $('a.category-nav').removeClass('highlighted-cat-nav');
  $('a.category-nav[data-slide=' + i + ']').addClass('highlighted-cat-nav');
});

---

PS: убедитесь, что вы используете уникальные имена переменных - т.е. slidesToShow, clone_slides, slides_count, slidesToShow2, clone_slides2, slides_count2и т. д. Затем убедитесь, что вы используете правильные имена в скопированном вами коде, который использует эти переменные.

Answer 2

Попробуйте добавить это, если заявление. Возможно, потребуется дополнительная настройка.

$('.category-gallery').on('afterChange', function (event, slick, currentSlide, nextSlide) {

  if(currentSlide >= $slides.length) { // added this if
    currentSlide -= $slides.length
  }

  $('a.category-nav').removeClass('highlighted-cat-nav');
  $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('highlighted-cat-nav');
});