Get Swiper Instance from Slides component

Ionic Framework Ionic React
1

I’ve read through the documentation and it says that you can get an instance of the Swiper using getSwiper() => Promise.

I’m currently importing the Slider
import { (removed other imports...), IonSlides } from "@ionic/react";

and then using it in a React.FC.

return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Survey Name</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonSlides pager={true}>{questions}</IonSlides>
      </IonContent>
    </IonPage>
  );

I’m not sure where or how to get the instance to be able to control it programmatically?

Thanks in advance.

2

I believe this should work

const mySlides = useRef(null);

return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Survey Name</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonSlides pager={true}  ref={mySlides}>
            {questions}
        </IonSlides>
      </IonContent>
    </IonPage>
  );
1 Like
3

That worked perfectly, thanks so much

4

glad i was able to help!

5

Using @aaronksaunders solution, I managed to get a reference to the slide component, however, using Typescript I couldn’t get hold of the Slider instance.

I kept getting a Property ‘…’ does not exist on type ‘never’. error.

This could be my inexperience with Typescript but it refers to setting the useRef(null) as an initial null value.

I ended up using the following solution.

let swiper: any = null;

const init = async function(this: any) {
    swiper = await this.getSwiper();
};

<IonSlides onIonSlidesDidLoad={init}>
    {renderQuestions}
</IonSlides>
2 Likes
6

Final update on this. I had to change the variable to use useState, after the function re-rendered the swiper instance was null.

const [swiper, setSwiper] = useState<any>({});

const init = async function(this: any) {
    setSwiper(await this.getSwiper());
};

<IonSlides onIonSlidesDidLoad={init}>
    {renderSlides}
</IonSlides>

Just one last note here, once I had that instance, I didn’t have access to the methods as described on the Ionic API website but rather as documented on the SwiperJs website.

As an example, to get the active index it is a property and not a method.

// property of swiper as per swiperjs docs
let index = swiper.activeIndex;
// not a method as per Ionic docs
index = await swiper.getActiveIndex();

Maybe I did it wrong but this worked for me.

2 Likes