Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable Swiper Slider if only 1 slide

Tags:

swiper

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,

  });
like image 200
CreateSean Avatar asked Oct 21 '16 20:10

CreateSean


People also ask

How do you remove pagination from swiper?

Remove this pagination={{clickable: true,}} from your code (That's it).

How do you destroy swiper on min width breakpoints?

Combining the destroy parameter with Window. matchMedia() is an effective way to manage Swiper on different screen sizes. Mobile first is optional—max-width, e.g., window. matchMedia( '(max-width:31.25em)' ), will work just as well.


2 Answers

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
like image 152
Flo Develop Avatar answered Sep 21 '22 10:09

Flo Develop


Simply add a condition:

if ($('.swiper-container .swiper-slide').length > 1) {
  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,

  });
}
like image 45
Samuel De Backer Avatar answered Sep 21 '22 10:09

Samuel De Backer