When in desktop mode, I want to display three images in center mode. However, in responsive mode, I need to display only a single image but it ends up displaying all three images:
https://i.sstatic.net/EejIK.png
Check it out
<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 Solutions
$(".slickImage").slick({
centerMode: true,
infinite: true,
autoplay: false,
centerPadding: '0px',
slidesToShow: 1,
arrows: true
});
If anyone has a solution to this issue, please share!