javascript - Swiper: Swipe to next item only with a button and to previous items manually - Stack Overflow

admin管理员组

文章数量:1340602

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?

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?

• javascript
• swiper.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 17, 2016 at 10:57 ManoloManolo 26.5k2121 gold badges8989 silver badges134134 bronze badges 2

• Sorry, seems logical if you disable the swipeToNext that you can't swipe to next. I don't understand the question. – Marcos Pérez Gude Commented Nov 17, 2016 at 11:21
• @MarcosPérezGude: Well I just want to disable manual swipe to next, but keeping swiping to next with a button and swiping to prev manually. – Manolo Commented Nov 17, 2016 at 11:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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!

To disable touch control:

mySwiper.disableTouchControl();

本文标签： javascriptSwiper Swipe to next item only with a button and to previous items manuallyStack Overflow