Disable Swiper Slider if only 1 slide

swiper
CreateSean picture CreateSean · Oct 21, 2016 · Viewed 40.5k times · Source

I'm using swiper slider on a site and would like to have it disabled if there is only one slide.

Currently with only one slide the pagination appears and you can click that or swipe. Ideally there shouldn't be any interaction if there is only one slide.

My current js is:

  var swiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: false,
    //autoplay: 6500,
    autoplayDisableOnInteraction: false,

    keyboardControl: true,
    mousewheelControl: true,

    pagination: '.swiper-pagination',
    paginationClickable: true,

  });

Answer

Flo Develop picture Flo Develop · Mar 26, 2018

There is an option in Swiper API that might be useful : 

watchOverflow (boolean|false)
// When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding

Related questions

How to detect current slide in swiper js?

Working with swiper js for a slider and want to detect the current image/slide. how i can detect with HTML and JS? any idea? <div class="swiper-container"> <div class="swiper-wrapper" align="center"> <div class="…

Read More
Swiper height auto resize

I have added swiper code in [REMOVED]. my code like here <div class="swiper-container"> <div class="swiper-wrapper"> <!--First Slide--> <div class="swiper-slide" id="swiper-slide"> <div class="content-slide"> content1 </div&…

Read More
idangerous swiper issue with dynamic content

I am applying the idangerous swiper scrollbar plugin on a container whose content is dynamically loaded with ajax, I initialize the plugin after the ajax call, the issue is that the scroll doesn't work until I resize the browser. I …

Read More