Morteza Negahi Morteza Negahi - 1 month ago 10
Javascript Question

Swiper carousel slidesPerView doesn't work Properly

I have One slide but my slide repeat to three items! How to stop repeat slides? If had 1 slide show one , if is two slide show two, if is 10 slides show 10 :| this is my config

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


and this is my Html code

<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>


Look at this image please
enter image description here

Answer

You can not have loop set to true and slidesPerView to 3 if you only have one tile. So this is what you can do:

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