React SwiperJS: horizontally nesting swiper components

Question

When nesting one horizontal swiper within another I have been running into an effect where when the inner swiper reaches the beginning or end of the slide list, the swiping motion begins to move the parent swiper. In order to stop this, I attempted to add both the nested as well as the touchReleaseOnEdges parameters to the inner swiper like so:

<Swiper
  touchReleaseOnEdges={true}
  nested={true}
  slidesPerView={3}>

  <SwiperSlide> Slide 1 </SwiperSlide>
  <SwiperSlide> Slide 2 </SwiperSlide>
  <SwiperSlide> Slide 3 </SwiperSlide>
  <SwiperSlide> Slide 4 </SwiperSlide>
  <SwiperSlide> Slide 5 </SwiperSlide>
  <SwiperSlide> Slide 6 </SwiperSlide>
</Swiper>

Unfortunately, applying these parameters doesn't fix the issue. How can I resolve this?

References: nested param, touchReleaseOnEdges param, relevant post, relevant post 2

Note: using Swiper 8.17.0

score 0 · Answer 1 · answered Dec 20 '22 at 15:33

You just need to pass touchMoveStopPropagation

<Swiper
  touchReleaseOnEdges={true}
  touchMoveStopPropagation
  nested={true}
  slidesPerView={3}>

  <SwiperSlide> Slide 1 </SwiperSlide>
  <SwiperSlide> Slide 2 </SwiperSlide>
  <SwiperSlide> Slide 3 </SwiperSlide>
  <SwiperSlide> Slide 4 </SwiperSlide>
  <SwiperSlide> Slide 5 </SwiperSlide>
  <SwiperSlide> Slide 6 </SwiperSlide>
</Swiper>

React SwiperJS: horizontally nesting swiper components

1 Answers1