Slick Slider Variable width menu and click issue after items end

Question

Slick slider with variable width items and arrow on the right scrolls even after the last item reached end. Anyway to fix this?

Link to fiddle: https://jsfiddle.net/abhiklpm/60hy4j3z/ (Click on the right arrow continuously and you could see the issue).

$('.variable-width').slick({
    arrows: false,
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: false,
    variableWidth: true
  });

Also if possible I would like to hide the right arrow if item count is less than the width.

score 0 · Answer 1 · answered Jan 24 '23 at 13:47

I had the same problem but with react-slicк. the problem there was that all the other slides except the first were set as style(pointer-events: none) that's because you set slidesToShow: 1.

The solution: override styles that turn off the pointer-event. In the case of react-slick I did it like this

:global .slick-slide:not(.slick-active) {
    pointer-events: all !important;
}

Slick Slider Variable width menu and click issue after items end

1 Answers1