13
votes

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,

  });
12

12 Answers

33
votes

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

I was looking for a way to do so too, but since I didn't find any “official” way to disable the swipe and hide the pagers, I decided to improvise a bit.

So in your script, you can add this after your Swiper variable:

JS:

if($(".slider .slide").length == 1) {
    $('.swiper-wrapper').addClass( "disabled" );
    $('.swiper-pagination').addClass( "disabled" );
}

This will add the class disabled to your wrapper and your pagination if there is only one slide in your slider. You can now add some CSS to bypass the Swiper effexts:

CSS:

.swiper-wrapper.disabled {
    transform: translate3d(0px, 0, 0) !important;
}
.swiper-pagination.disabled {
    display: none;
}

Note that this will only work when the loop is set to false (like in your case). If the loop is active, Swiper will add slide duplicates before and after your only slide, making a total of 3 identicals slides. You can then change the length == 1 to length == 3.

Hope this will help!

6
votes

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);
4
votes

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;
        ...
    }
}
2
votes

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,

  });
}
1
votes

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

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!

0
votes

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

swiper.allowTouchMove = false;

0
votes

CSS class name added to navigation button when it becomes disabled

 disabledClass: 'disabled_swiper_button'

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

0
votes

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
}
-2
votes

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