Показывать различное количество слайдов на разных точках останова, используя Slick Carousel - PullRequest
Новая
       55

Показывать различное количество слайдов на разных точках останова, используя Slick Carousel

0 голосов
/ 26 апреля 2020

Я использую слик. js для отзывчивой карусели, которую я строю. На данный момент для точки останова 980px я хочу показать только два слайда, но у меня это не работает. Вот мой код: - 

  $(document).ready(function() {
$('.whatsNextSlick').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,

    responsive: [
        {
                breakpoint:980,
                settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
                infinite:true

            }


        },
        {
            breakpoint:767,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite:true,
               centerMode: true,
                centerPadding: '20%'
            }

        }


    ]
});



  });

Может кто-нибудь помочь мне понять, что не так с моим кодом?

Спасибо

1 Ответ

0 голосов
/ 26 апреля 2020

Он отлично работает на моей машине, я добавил CSS, чтобы выглядеть красиво. 

$('.carousel').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: 980,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true
      }
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        centerMode: true,
        centerPadding: '20%'
      }
    }
  ]
});
html,
body {
  background-color: #e74c3c
}

.wrapper {
  width: 100%;
  padding-top: 20px;
  text-align: center;
}

h2 {
  font-family: sans-serif;
  color: #fff;
}

.carousel {
  width: 90%;
  margin: 0px auto;
}

.slick-slide {
  margin: 10px;
}

.slick-slide img {
  width: 100%;
  border: 2px solid #fff;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />


<div class="responsive">
  <h2>Slick Carousel Example</h2>
  <div class="carousel">
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
...