Question

这些是我在我的页面上使用的光滑轮播的设置

  $('.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宽，它只是完全弄乱了我的页面，更不用说旋转木马中的项目变得隐形了，我尝试了猫头鹰旋转木马并且得到了一个类似的问题，现在也是Slick。任何人都可以告诉我哪里出错或者可能建议更好的反应式旋转木马吗？

Answer 1

您面临的问题是通过CSS

更改css并尝试

.vertical-container

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

希望这会有所帮助..

Answer 2

对于在较小的视口上无法正确显示幻灯片的任何人，请尝试为 Slick 设置一些边界：

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

光滑的轮播响应功能无法正常工作

3 个答案: