Question

我有一个光滑的滑块，当我在其上滑动时，它不会滚动多个幻灯片。我认为代码是正确的，但我无法理解为什么它不能按我想要的那样滚动7张幻灯片。也许我没有看到明显的东西......

HTML

<div class="slideshow-wrapper">
  <div class="preloader"></div>
  <div class="homeslick">
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
    <div><img src="https://via.placeholder.com/150x150"></div>
  </div>
</div>

JS

$(document).ready(function(){
  $('.homeslick').slick({
    infinite: true,
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 7,
    slidesToScroll: 7,
    autoplay: true,
    autoplaySpeed: 2000,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToScroll: 7,
          slidesToShow: 7
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToScroll: 3,
          slidesToShow: 3
        }
      }
    ]
  });
});

Answer 1

只需添加swipeToSlide: true属性。

swipeToSlide-允许用户直接拖动或滑动到幻灯片，而与slidesToScroll无关。

Type: boolean
Default: false

Documentations Link

光滑 - 不会在滑动时滚动正确数量的幻灯片

1 个答案: