IonItemSliding inside IonSlides double sliding

Ionic Framework Ionic React
1

Hi all

I have a IonItemSliding inside of IonSlide and when i swipe a IonItemSliding to the right or left i end up in the next slide

i created a repo with an example

https://github.com/nicolasmaurotorres/ionic5-ionSlides-ionItemSliding

I want to swipe the IonItemSliding and do not activate the IonSlide , there is a way to do this ?

Thanks!

1 Like
2

Without having done this I can think of two options

Grab the ionDrag event and try to block event bubbling

Or take the ionDrag and tell the ionSlide not to slide. And a variety to latter: block the sliding of the slide and place a button to go next and previous

I had a similar issue with google maps on a slide. I think next time I will use material stepper

3

Hi Tommertom

First i went with the stop event bubbling but nothings appends

Then i went with the approach to tell the IonSlides to lock the swipe and release some time later

the only event in IonSliding is onIonDrag so this was my final solution

<IonSlides ref={slidesRef}>
...
                   <IonItemSliding
                      onIonDrag={(e) => {
                        slidesRef.current.lockSwipes(true);
                        setTimeout(() => {
                          slidesRef.current.lockSwipes(false);
                        }, 500);
                      }}
                    >
 ...
</IonSlides>

Thanks for the alternatives!

2 Likes