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,
});
Remove this pagination={{clickable: true,}} from your code (That's it).
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.
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
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,
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With