Jquery 光滑转盘响应功能不工作

这些是我在页面上使用的滑动转盘的设置

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

---

它的意思是给我一个垂直和水平居中，响应旋转木马。唯一的问题是，当我在一个小于992px宽的屏幕上调整页面大小或重新加载页面时，旋转木马变为5965230px宽，它完全弄乱了我的页面，更不用说旋转木马中的项目变为不可见，我尝试了Owl旋转木马，遇到了类似的问题，现在也变得光滑了。有谁能告诉我哪里出了问题，或者可能会建议一个更好的响应转盘吗？

您面临的问题是通过CSS

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
  ]
});

更改css并重试

.vertical-container

这个类CSS导致了这个问题，我不确定，但我认为

display:flex不工作

希望这对您有所帮助。
对于那些在较小的视口中无法正确显示幻灯片的人，请尝试为Slick提供一些边界：

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

这并没有解决问题，prashant。“平滑轨道”类仍然是超宽的。我甚至试着用javascript缩小track类的大小，但这些项仍然是不可见的……JQuery lightSlider（）使用这个。即使我今天也在使用这个光滑的滑块。真是巧合。。我会尽力解决这个问题。你能告诉我你正在使用的图像的大小吗。他们是“眼魔”班。我试图通过相对于一个slideItem的宽度对其进行样式设置，使其具有响应性，因此它包含项目宽度的60%，并且高度自动保持高宽比。我给它留了20%的余量，这样它就会集中在SlideItem中，几乎修复了这个错误，但是我想我可以用jQuery和CSS来破解这个小溢出，但是为什么你认为它适用于991px以上的屏幕，而不是低于991px的屏幕呢？此外，我给row类显示了flex，而不是旋转木马本身…@EricmWinner，正如我所说的，我不确定是什么导致它在大屏幕上工作，但我可以找出小屏幕中的css问题。无论如何，非常感谢您的帮助。我想我必须找到另一种方法使旋转木马垂直居中。
.slick-list {
  min-height: 200px;
  width: 100%;
}