CODEWITHSUNDEEP
javascriptswiper.js
Manolo
Manolo

Reputation: 26370

Swiper: Swipe to next item only with a button and to previous items manually

I'm using swiper to show some items.

I want to swipe to next item only when a button is clicked, but letting to swipe manually to previous items.

Those are the relevant options related to swiping:

allowSwipeToPrev: Set to false to disable swiping to previous slide direction (to left or top)

allowSwipeToNext: Set to false to disable swiping to next slide direction (to right or bottom)

swipeHandler: String with CSS selector or HTML element of the container with pagination that will work as only available handler for swiping

nextButton: String with CSS selector or HTML element of the element that will work like "next" button after click on it

prevButton: String with CSS selector or HTML element of the element that will work like "prev" button after click on it

If I use swipeHandler as the button selector, it works as expected, except that I cannot swipe to previous item since it works as only available handler for swiping. No matter what other options I use.

If I set allowSwipeToNext to false and use nextButton instead of swipeHandler, it won't swipe to next item, even when I click the next button.

So the question is: How can I achieve to swipe to next item only with a button and to previous items only manually?

Upvotes: 4

Views: 34706

Answers (2)

pka246
pka246

Reputation: 333

To disable touch control:

mySwiper.disableTouchControl();

Upvotes: 1

Vini Goulart
Vini Goulart

Reputation: 101

had the same problem and solved like this:

var swiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
});
// Locks the swipe to next by default
swiper.lockSwipeToNext();

$("#button_id").click(function(e){
  e.preventDefault();
  // Unlocks the swipe to next when the button is clicked
  swiper.unlockSwipeToNext();
  // Swipes to the next slide
  swiper.slideNext();
  // Locks the swipe to next again after moving to the next slide
  swiper.lockSwipeToNext();
});

I hope it helps you!

Upvotes: 6

Related Questions