[英]Swiper carousel doesn't work in Visual studio with Cordova
[英]Swiper carousel slidesPerView doesn't work Properly
我有一张幻灯片,但我的幻灯片重复了三项! 如何停止重复的幻灯片? 如果有一个幻灯片1,如果是两个幻灯片2,如果是10幻灯片10,| 这是我的配置
var swiper = new Swiper('.slides-per-view', {
pagination: '.swiper-pagination',
speed: 800,
loop: true,
slidesPerView: 3,
centeredSlides: true,
spaceBetween: 30,
grabCursor: true,
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
这是我的HTML代码
<div class="swiper-container slides-per-view" dir="rtl">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure>
<a href="#"><img draggable="false" src="assets/pictures/activities/1.jpg" class="img-responsive" alt=""></a>
<figcaption class="text-light text-center"> Title</figcaption>
<div class="more text-center margin-bottom-30">
<p class="text-blue"><i class="fa fa-calendar"></i> Date</p>
<a href="" class="btn btn-info-border text-dark transition-5"> Read More </a>
</div>
</figure>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
如果您只有一个图块,则无法将loop设置为true并将slidesPerView设置为3。 因此,您可以执行以下操作:
var isLoop = true;
if($('.swiper-slide')).length < 3) {
isLoop = false;
}
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
speed: 800,
loop: isLoop, //<--- set if loop is true or not
slidesPerView: 3,
centeredSlides: true,
spaceBetween: 30,
grabCursor: true,
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.