jquery - 响应式的光滑图像

Question

在桌面模式下，我想在中心模式下显示三个图像。但是在响应中我必须只显示单个图像但它在响应中显示三个图像:

查看

<div class="slider-section2" style="overflow:hidden">
   <div class="slid-container">
       <ul class="slickImage" ng-if="loadSwiper" ng-init="previewAd.loadSwiperImages()">
           <li ng-repeat="image in ads.adDetailForPreview.MainAdsImages track by $index">
               <div class="block-cont">
                    <img ng-class="IsRegularSizeAd?'':'DoubleSizeImg'" ng-src="~/Content/Images/AdsImages/{{image.Path}}" />
                </div>
            </li>
        </ul>
    </div>
</div>

Jquery

$(".slickImage").slick({
     centerMode: true,
     infinite: true,
     autoplay: false,
     centerPadding: '0px',
     slidesToShow: 1,
     arrows: true
});

请问有人有办法解决这个问题吗？

Answer 1

你试过断点吗？像这样:

responsive: [
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1
    }
  }
]