'Disable Swiper Slider if only 1 slide

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,

  });

swiper

Solution 1:^[1]

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

Solution 2:^[2]

One of the options would be to conditionally add options, as below:

    let options = {};

    if ( $(".swiper-container .swiper-slide").length == 1 ) {
        options = {
            direction: 'horizontal',
            loop: false,
            autoplayDisableOnInteraction: false,

            keyboardControl: true,
            mousewheelControl: true,

            pagination: '.swiper-pagination',
            paginationClickable: true,
        }
    } else {
        options = {
            loop: false,
            autoplay: false,
        }
    }

    var swiper = new Swiper('.swiper-container', options);

Solution 3:^[3]

Just check how many slides you got:

const numberOfSlides = document.querySelectorAll('.swiper-slide').length;

Then set allowSlidePrev/allowSlideNext (or whatever you want to prevent) to false if it's only one slide:

const slider = new Swiper('.swiper-container', {

    allowSlidePrev:numberOfSlides === 1 ? false:true,
    allowSlideNext:numberOfSlides === 1 ? false:true

});

You also have access to the collection of slides so you could also turn on/off these things in your events. In init for example:

on: {
    init: function () {
        const numberOfSlides = this.slides.length;
        ...
    }
}

Solution 4:^[4]

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,

  });
}

Solution 5:^[5]

Laconic solution:

var swiper = new Swiper('.swiper-container', {
    navigation: {
        prevEl: '.swiper-button-prev',
        nextEl: '.swiper-button-next',
    },
    on: {
        init: function () {
            if (this.slides.length <= 1) {
                // First way:
                this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
                this.el.querySelector(".swiper-button-prev").setAttribute('hidden', '');  // hiding arrows prev&next
                this.el.querySelector(".swiper-button-next").setAttribute('hidden', '');

                // Second way:
                // this.el.classList.add('swiper-no-swiping');
            }
        }
    }
});

Solution 6:^[6]

I propose to use update swiper function with new options like this:

params.loop = false;
params.pagination = null;
swiper.update();

Params is the object which was used with swiper initialization.

Thanks!

Solution 7:^[7]

You can check the number of slides, and add swiper-no-swiping class to disable swiping. This assumes noSwiping is kept as true (default setting) [docs]

  // 1. Initialize Swiper
  var swiper = new Swiper('.swiper-container', {
    // Sample parameters
    direction: 'horizontal',
    loop: false,
    autoplayDisableOnInteraction: false,
    keyboardControl: true,
    mousewheelControl: true,
    pagination: '.swiper-pagination',
    paginationClickable: true,
  });


  swiper.on('init', function() {
     // 2. Get Slide count
     if (slider.slides.length <= 1) {
        // 3. Add swiper-no-swiping class
        document.querySelector('.swiper-container').classList.add('swiper-no-swiping')
     }
  });

Solution 8:^[8]

swiper.allowTouchMove = false;

Solution 9:^[9]

CSS class name added to navigation button when it becomes disabled

 disabledClass: 'disabled_swiper_button'

for reference click https://swiperjs.com/swiper-api#navigation

Solution 10:^[10]

With the latest swiper.js version, you can add enabled: false to the options. this will, when disabled hide all navigation elements and won't respond to any events and interactions

Found on the API documentation documentation.

Tested with v6.6.1

Here an example

var items = ['slide1']

var options = {
 enabled: items.length > 1
}

Solution 11:^[11]

Well using $ionicSlides for me works fine to ask the length of the array and if is one or less get the Swiper instance and call these functions:

 $scope.$on("$ionicSlides.sliderInitialized", function (event, data) { 
    $scope.slider2 = data.slider;
      $scope.slider2.activeIndex = 0;

     if (vm.slidetext && vm.slidetext.length <= 1) {

        $scope.slider2.destroyLoop();
        $scope.slider2.stopAutoplay();
        $scope.slider2.lockSwipes();
      } 
}

But these functions are for the native Swiper so should works fine

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Klemart3D
Solution 2	Afron Orana
Solution 3	William Åström
Solution 4	Samuel De Backer
Solution 5
Solution 6	Max Abakumov
Solution 7	naribo
Solution 8
Solution 9	weirdan
Solution 10	RaphaÃ«l Balet
Solution 11	pabloRN

'Disable Swiper Slider if only 1 slide

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]