reactjsswiper.jsvisual-web-developerreact-swiper

swiper react blocks web page scrolling by touch(swipe) on a mobile device


I made 3 swipers in my application and only this one doesn't allow me to scroll the site with a swipe, here are the settings that I set for this swiper:

<Swiper
        allowTouchMove={false}
        effect={'fade'}
        direction={'vertical'}
        slidesPerView={1}
        loop={false}
        pagination={{
          clickable: true,
          el: '.swiper-pagination',
        }}
        autoplay={{
          delay: 5000,
          disableOnInteraction: false,
        }}
        modules={[EffectFade, Navigation, Pagination, Autoplay]}
        style={{
          width: '100%',
          height: `${
            isSmallScreen
              ? '350px'
              : isSmallScreenStyle
              ? '290px'
              : isSmallScreenStyleTwo
              ? '550px'
              : '700px'
          }`,
          marginTop: '20px',
          display: 'flex',
          flexDirection: 'row-reverse',
          position: 'relative',
}}>

in swiper I tried to use properties such as:

1.touchMoveStopPropagation={true}
2.touchStartPreventDefault={false}
3.simulateTouch={false}
4.className="swiper-no-swiping" - CSS:
.swiper-no-swiping {
pointer-events: auto !important;
}

These methods didn't help.
I hope someone can tell me what's wrong.
I repeat, the problem is scrolling the entire page and not the slides.


Solution

  • I fixed the problem, for those who encountered such a problem, here is the reason: if you use the (direction={'vertical'}) swiper property, then for some reason it will not be possible to vertically scroll the page on mobile devices with your fingers, that is, with swipes.