I have a slick slider that doesn't scroll more than one slide when I swipe on it. I think the code is right but I can't understand why it doesn't scroll 7 slide at time as I want. Maybe I'm not seeing something obvious...

HTML

<div class="slideshow-wrapper">
  <div class="preloader"></div>
  <div class="homeslick">
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></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
        }
      }
    ]
  });
});

I have a slick slider that doesn't scroll more than one slide when I swipe on it. I think the code is right but I can't understand why it doesn't scroll 7 slide at time as I want. Maybe I'm not seeing something obvious...

HTML

<div class="slideshow-wrapper">
  <div class="preloader"></div>
  <div class="homeslick">
    <div><img src="https://via.placeholder./150x150"></div>
    <div><img src="https://via.placeholder./150x150"></div>
    <div><img src="https://via.placeholder./150x150"></div>
    <div><img src="https://via.placeholder./150x150"></div>
    <div><img src="https://via.placeholder./150x150"></div>
    <div><img src="https://via.placeholder./150x150"></div>
    <div><img src="https://via.placeholder./150x150"></div>
    <div><img src="https://via.placeholder./150x150"></div>
    <div><img src="https://via.placeholder./150x150"></div>
    <div><img src="https://via.placeholder./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
        }
      }
    ]
  });
});

• javascript
• jquery
• slick.js

Share Improve this question Follow edited May 2, 2020 at 17:28 Richard Dallaway 4,33011 gold badge2929 silver badges3939 bronze badges asked Dec 22, 2017 at 11:52 DaFoisDaFois 2,22388 gold badges2828 silver badges4747 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Just add the swipeToSlide: true property.

swipeToSlide - Allow users to drag or swipe directly to a slide irrespective of slidesToScroll.

Type: boolean
Default: false

Documentations Link