CODEWITHSUNDEEP
javascriptjquery
Morteza Negahi
Morteza Negahi

Reputation: 3483

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

Upvotes: 0

Views: 19519

Answers (1)

Zorken17
Zorken17

Reputation: 1896

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

Upvotes: 5

Related Questions