Slick Slider - 如果显示所有幻灯片，则 slick-current class 在导航时不会移动

Question

I have a simple slider with Slick.js ( https://kenwheeler.github.io/slick/ )

The slider arrows are hidden by default when all slide-items are shown because its not necessary to slide. So i use custom arrows with a click function that call .slick('slickNext') or .slick('slickPrev') and its working fine. But my issue is when all slide-items are shown and I call the functions to slide next or previous the .slick-current class on the active slide-item is not switching anymore.

My goal is that the .slick-current class still moves when I click the buttons.

An example: https://jsfiddle.net/0nprbj95/2/ Appreciate your help!

Answer 1

One solution to ensure that Slick is moving the .slick-current class is to hold the state of the current slide index and then use the slick('goTo') method to force Slick to move the class to this slide.

This may not give exactly the behavior that you want because Slick will still shift the slides in its "viewport", but you might be able to tweak the behavior from there.

$(document).ready(function(){
  var currentSlide = 0;
  var numSlides = document.getElementsByClassName('slide-item').length;

  $('.slider-items-wrapper').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      mobileFirst: true,
      infinite: true,
      arrows: false,
  });

  $('.button-prev').click(function(){
    // wrap to last slide when clicked on first slide
    currentSlide = (currentSlide - 1 + numSlides) % numSlides;
    $('.slider-items-wrapper').slick('goTo', currentSlide);
  });

  $('.button-next').click(function(){
    // wrap to first slide when clicked on last slide
    currentSlide = (currentSlide + 1) % numSlides;
    $('.slider-items-wrapper').slick('goTo', currentSlide);
  });
});

Full JSFiddle: https://jsfiddle.net/c3amxzk1/1/