How to scroll the page, when I have vertical swiper on mobile view

[wramadan7-org]

Can someone please give the example how to swipe(scroll the page) when the view is in swiper on mobile view?

[RoVluche]

I've struggled with this one for a while as well and the solution I found was honestly pretty hacky but it worked for me. If someone can come up with a cleaner solution feel free to add on to this. I would love to know how this get's done properly.

Situation

In my project I had a vertical swiper which I wanted the be usable using external buttons. The user should never be able to slide the swiper directly. The swiper contained articles with a clickable image and button. On mobile when I tried to swipe to scroll it wouldn't scroll if my swipe started on my swiper.

What I tried (and didn't work)

• I added the following options to my swiper in an attempt to prevent any touch input from being intercepted:
  allowTouchMove: false, touchMoveStopPropagation: true, touchStartPreventDefault: false, simulateTouch: false,
• I added the swiper-no-swiping class to my main swiper, my swiper-wrapper and all my swiper-slide
• I added the css property pointer-events: none to my swiper. This did allow me to scroll but my clickable items inside the swiper failed to work
• I used the on option to add event listeners with a handler that would simply call stopPropagation() on the triggered event. The events I tried to listen to were: touchStart, touchMove, touchEnd, touchMoveOpposite, tap, sliderMove, sliderFirstMove, doubleTap, doubleClick and click.

None of these helped to solve my issue.

(Hacky) Solution

If you need a vertical slider that the user should never interact with directly then adding pointer-events: none to the css of the swiper should do the trick.

If you were in a situation like mine where you needed to be able to click on elements inside the swiper then this what I did.
Considering the swiper only need to be vertical from a visual perspective and not a practical side, I decided to change my swipers direction to horizontal and simulate a vertical swiper with the creative effect. For the creativeEffect, I made sure that the slides would move vertically instead of horizontally.

direction: 'horizontal',
effect: 'creative',
creativeEffect: {
  prev: {
    translate: [0, '-100%', 0],
    //Add any additional effects you want
  },
  next: {
    translate: [0, '100%', 0],
    //Add any additional effects you want
  },
},

Considering that a horizontal swiper only prevents horizontal page scrolling, this works perfectly for me as I only needed vertical scrolling on my page. The solution also still allows me to have clickable items inside of my swiper.

Clearly this is a very hacky solution, I'm making a horizontal swiper look vertical, but this is what worked for me. Maybe there is a cleaner way of doing this but I certainly couldn't find it. To me, it just seems weird though that setting allowTouchMove: false or the swiper-no-swiping class doesn't allow us to scroll the page at that point. I'd imaging that if you're using these that you'd want the user to swipe using the navigation, pagination, scrollbar or some external element and not have the whole swiper interrupt what the user is doing.