Swiper: Disable Slide

[pensan]

Hi,

is there a way to disable a slide? For example I don't want a user to be able to swipe to the last slide. The slide will be visible, but not in the center. So swiping forward should be disabled on the slide before the last.

Thank you in advance, pensan

[nolimits4web]

Hi,
Sorry but no, it is not possible. And not sure how to implement this manually

[pensan]

Thank you for your quick response.

May be you could add a function/parameter to prevent swipeNext/swipePrev from executing? So it would be possible to call this from within onTouchEnd.

[nolimits4web]

Can you show me an example where is such option will be useful, i just don't get it))

[pensan]

Sorry for the late reply.

If you take this demo for example.
http://www.idangero.us/sliders/swiper/demos/main-demos/16-visibility-api.html

I would like to start on slide Nr.2 (which is already possible), but I want to prevent the user from scrolling back to Nr.1. Also at the last slides, Nr.5 should be allowed, Nr.6 not.

Nr.1 and Nr.6 will be some images which are larger then the visible area, they are just for styling purposes.

[henriquetorres]

Hello,
Example: just add a class to the slide that you do not want to be able to slide to, like class="preventSlideTo"
and on onSlideChangeStart:function(){
control if the element have the class "preventSlideTo" and prevent anim
}
What it could be implement as a default function is, something like other sliders do, onBeforeSlideChangeStart / onBeforeSlideChangeEnd, this could be a nice feature

EDIT: or onSlideChangeEnd:function(){
control if the element have the class "preventSlideTo" and detect direction to know if you need to call swipeNext() or a swipePrev()
}

[nolimits4web]

@henriquetorres much easier, don't forget that there is a swiper-no-swiping class that disable swiping on this class, closing this issue

[Moidul]

it is too late. but it may help others.
I had a similar issue.
Issue/Problem: I have [x] no of slides and [n] number of slide disabled. (x>n)
Expected behavior: user can see the disabled slide number in the pagination section but not able to click or see those disabled slides.

Solution:
File: Swiper.js
Define two new classes under the default parameters setting

1. bulletDisabledClass: 'swiper-pagination-bullet-disabled'
2. slideDisabledClass: 'swiper-slide-disable',
   Update the updatePagination function (Line No: 938)
   instead of using numberOfBullets, count all the slides including disabled slides by adding following lines
   .
   .
   var allSlides = s.wrapper.children('.' + s.params.slideClass + ',.' + s.params.slideDisabledClass);
   for (var i = 0; i < allSlides.length; i++) {
   var slide = allSlides[i];
   if ($(slide).hasClass(s.params.slideClass)) {
   if (s.params.paginationBulletRender) {
   bulletsHTML += s.params.paginationBulletRender(i, s.params.bulletClass);
   }
   else {
   bulletsHTML += '<' + s.params.paginationElement + ' class="' + s.params.bulletClass + '">';
   }
   } else {
   bulletsHTML += s.params.paginationBulletRender(i, s.params.bulletDisabledClass);
   }
   }
   s.paginationContainer.html(bulletsHTML);
   s.bullets = s.paginationContainer.find('.' + s.params.bulletClass + ',.' + s.params.bulletDisabledClass);
   .
   .
   .

i did not test all the possible scenarios but served my purpose. Enjoy!!

[genjerdotcom]

just do like this man..

add this code

touchRatio: 0, 
slideToClickedSlide: true,
 ```
will disable touch slide and enable click function slide

var swiper = new Swiper('.the-quiz', {
pagination: '.swiper-pagination',
paginationClickable: false,
touchMoveStopPropagation:false,
simulateTouch : false,
allowSwipeToNext: true,
allowSwipeToPrev: true,
allowPageScroll: "auto ",
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
touchRatio: 0,
slideToClickedSlide: true,
});
```

thanks

[LucaBn]

I was able to prevent a user to swipe after a certain slide using this code:

// Example: I have n slides and I want to prevent SlideNext after the 5th slide

mySwiper.on('slideNextTransitionStart', function () {
var stop_at = 5;
var ri = swiper.realIndex;

if (ri == stop_at) {
this.allowSlideNext = 0;
} else {
this.allowSlideNext = 1;
}
});

mySwiper.on('slidePrevTransitionEnd', function () {
// If you go back to the prev slide, you'll be able again to swipe to the next slide
this.allowSlideNext = 1;
});