使用Slick轮播在不同的断点上显示不同数量的幻灯片 [英] Show Different Number of Slides on different breakpoints using Slick carousel

问题描述

我正在将slick.js用于正在构建的响应式轮播.目前，对于980px的断点，我只想显示两张幻灯片，但这对我不起作用.这是我的代码:-

I am using slick.js for a responsive carousel I am building. At the moment, for the breakpoint 980px, I want to show only two slides, but it's not working for me. Here is my code :-

  $(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%'
            }

        }


    ]
});



  });

有人可以帮助我理解我的代码出了什么问题吗?

Can someone help me understand, what's going wrong with my code?

谢谢

推荐答案

在我的机器上运行良好，我添加了一些CSS看起来很漂亮.

It's perfectly working on my machine, I added some CSS to look beautiful.

$('.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>

这篇关于使用Slick轮播在不同的断点上显示不同数量的幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！