Slick Carousel: Stop navigation when last item is visible

Question

I have a simple carousel of items which have the same width.

I want to stop the carousel navigation (with the arrows and by dragging the carousel), when the last item in the carousel is visible in the right side of the carousel.

Currently, you can keep pressing the next arrow button to navigate until the last item is in the left side of the carousel, like this:

The desired outcome, as explained above, looks like this:

It seemed like setting edgeFriction to 0 would solve my problem, but it doesn't seem to work. Maybe I don't understand this well enough and the documentation isn't clear enough?

HERE'S A FIDDLE

HTML

<div class="carousel">
  <div class="item">
    <div class="content">
      <div class="text">
      <strong>FIRST</strong> ipsum dolor sit amet, consectetur adipisicing elit. Velit necessitatibus, voluptate doloribus temporibus, fuga inventore iure repellat unde amet error accusantium cum et assumenda quae rerum laudantium voluptas facere obcaecati?
    </div>
    <img src="https://images.unsplash.com/photo-1593444461581-b5ae72d3b637?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
    </div>
  </div>
  <!-- etc -->
</div>

JS

$('.carousel').slick({
    variableWidth: true,
    loop: false,
    infinite: false,
    dots: false,
    arrows: true,
    appendArrows: $('.append')
});

score 3 · Accepted Answer · answered Jul 07 '20 at 18:41

This is because of your parameter variableWidth is set to true. Since all items are the same width, you don't need it.

Using these settings should work.

$('.carousel').slick({
  loop: false,
  infinite: false,
  dots: false,
  arrows: true,
  appendArrows: $('.append'),
  slidesToShow: 4,
  slidesToScroll: 1
});

Fiddle

Keep in mind that you can change slidesToShow at specific breakpoint for responsiveness.

Slick Carousel: Stop navigation when last item is visible

1 Answers1