Slick Carousel：当最后一项可见时停止导航

Question

我有一个宽度相同的简单项目轮播。

当轮播中的 last 项在 右侧可见时，我想停止轮播导航（使用箭头并拖动轮播） 旋转木马的一侧。

目前，您可以按住 next 箭头按钮进行导航，直到最后一个项目位于轮播的左侧，如下所示：

如上所述，期望的结果如下所示：

似乎将 edgeFriction 设置为 0 可以解决我的问题，但它似乎不起作用。可能是我理解不够，documentation不够清楚？

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')
});

Answer 1

这是因为您的参数 variableWidth 设置为 true。由于所有项的宽度都相同，因此您不需要它。

使用这些设置应该可以。

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

Fiddle

请记住，您可以在特定断点处更改 slidesToShow 以提高响应能力。

Slick Carousel：当最后一项可见时停止导航

Slick Carousel: Stop navigation when last item is visible

javascript

jquery

carousel

slick.js