Ionic v5 React Ion-Slides: How to make a button to the next slide?

Issue

Ionic Slides by default rely on swiping the screen.

I am also hosting my Ionic app as a webapp on my site, so I want to let users press a button to advance to the next slide as well. ("Swiping" with a mouse is not intuitive.)

According to the documentation linked above, there is a slideNext method, but how do I use this? I can't figure out how to call it in my code.

For example, what can I add to onClick of IonButton below? (Code based on the example react conference app)

const Tutorial: React.FC<TutorialProps> = ({ history, setHasSeenTutorial, setMenuEnabled }) => {
  const [showSkip, setShowSkip] = useState(true);
  const slideRef = useRef<HTMLIonSlidesElement>(null);

  const handleSlideChangeStart = () => { 
    slideRef.current!.isEnd().then(isEnd => setShowSkip(!isEnd));
  };

  return (
    <IonPage id="tutorial-page">
      <IonContent fullscreen>

        <IonSlides ref={slideRef} onIonSlideWillChange={handleSlideChangeStart} pager={false}>
          <IonSlide>
            <img src="assets/img/ica-slidebox-img-1.png" alt="" className="slide-image" />
            <h2 className="slide-title">
              Welcome to <b>ICA</b>
            </h2>
            <p>
              The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.
            </p>
            <IonButton onClick={// What do I put here to go to the next slide?} />
          </IonSlide>

          <IonSlide>
            <img src="assets/img/ica-slidebox-img-4.png" alt="" className="slide-image" />
            <h2 className="slide-title">Ready to Play?</h2>
            <IonButton fill="clear" onClick={startApp}>
              Continue
              <IonIcon slot="end" icon={arrowForward} />
            </IonButton>
          </IonSlide>
        </IonSlides>
      </IonContent>
    </IonPage>
  );
};

Solution

  // get slide ref
  const mySlides = useRef(null);

  const onBtnClicked = async (direction: string) => {
    const swiper = await mySlides.current.getSwiper();
    if (direction === "next") {
      swiper.slideNext();
    } else if (direction === "prev") {
      swiper.slidePrev();
    }
  };

in render

return (
    <IonContent>
      <IonSlides
        options={slideOpts}
        ref={mySlides}
        onIonSlideDidChange={handleSlideChange}
      >
        <IonSlide>ONE</IonSlide>
        <IonSlide>TWO</IonSlide>
        <IonSlide>THREE</IonSlide>
      </IonSlides>
      <div style={{ textAlign: "center", paddingTop: 12 }}>
        <IonButton
          disabled={mySlides.current?.isBeginning}
          onClick={() => onBtnClicked("prev")}
        >
          PREV
        </IonButton>
        <IonButton
          disabled={mySlides.current?.isEnd}
          onClick={() => onBtnClicked("next")}
        >
          NEXT
        </IonButton>
      </div>
    </IonContent>
  );

video and full source code https://www.youtube.com/watch?v=mCkrZYIbH10

Answered By - Aaron Saunders