Slick Carousel 响应功能不起作用

Question

这些是我在我的页面上使用的 slick carousel 的设置

  $('.service-carousel').slick({
   dots: false,
   infinite: true,
   speed: 300,
   slidesToShow: 3,
   slidesToScroll: 1,
   arrows: true,
   autoplay: true,
   autoplaySpeed: 2000,
   responsive: [{
   breakpoint: 1200,
   settings: {
   slidesToShow: 3,
   slidesToScroll: 1,
   infinite: true
  }
 },
 {
   breakpoint: 600,
   settings: {
   slidesToShow: 1,
   slidesToScroll: 1,
   infinite: true
  }
 }]
});

这是我的html

<div class="sixth-slide">
  <p class="title">EYES</p>
  <div class="container">
    <div class="row vertical-container text-center">
      <div class="col-md-12 content cooo text-center">
        <div class="service-carousel">
          <div><img src="img/eyeone.png" class="eyelogos" /></div>
          <div><img src="img/eyetwo.png" class="eyelogos" /></div>
          <div><img src="img/eyethree.png" class="eyelogos" /></div>
          <div><img src="img/eyefour.png" class="eyelogos" /></div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom-scroll"><a href="#" class="bottom"><img src="img/godown.png" class="godown"/></a></div>
</div>

还有我的CSS(SASS)

.vertical-container
   min-height: 100vh
   display: -webkit-box
   display: -moz-box
   display: -ms-flexbox
   display: -webkit-flex
   display: flex
   -webkit-box-align : center
   -webkit-align-items : center
   -moz-box-align : center
   -ms-flex-align : center
   align-items : center
   width: 100%
   -webkit-box-pack : center
   -moz-box-pack : center
   -ms-flex-pack : center
   -webkit-justify-content : center
   justify-content : center
   position: relative

.content.cooo
   display: block
   text-align: center
   margin: 0 auto
   font-family: 'PT Sans', sans-serif

div.sixth-slide
  .div.row.vertical-container
     @extend .vertical-container
  .eyelogos
     width: 60%
     margin-left: 20%

它旨在给我一个垂直和水平居中的响应轮播。唯一的问题是，当我在宽度小于 992px 的屏幕上调整页面大小或重新加载页面时，轮播变成 5965230px 宽，它完全弄乱了我的页面，更不用说轮播中的项目变得不可见，我试过 Owl旋转木马并且遇到了类似的问题，现在也出现了 Slick。任何人都可以告诉我我哪里出错了，或者可能建议一个更好的响应轮播吗？

Answer 1

use below arguments please

$('.service-carousel').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

Answer 2

您遇到的问题是 CSS

更改 css 并尝试

.vertical-container

这个 class CSS 导致了这个问题，我不确定，但我认为 display:flex; 不起作用。

希望这对您有所帮助..

Answer 3

对于幻灯片在较小的视口上无法正确显示的问题，请尝试给 Slick 一些边界以供使用：

.slick-list {
  min-height: 200px;
  width: 100%;
}

Slick Carousel 响应功能不起作用

Slick Carousel Responsive Feature not Working

html

css

jquery

sass

slick.js