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

Question

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>
  );
};

Answer 1

This works in ionic 5 for sure. Please try it

const SlideShow: React.FC = () => { const slideOpts = { initialSlide: 0, speed: 400 }; const mySlides = useRef(null);
const onBtnClicked = async (str:any) => { const swiper = mySlides.current?.getSwiper();
swiper?.then((e)=>{ if(str=='next'){ e.slideNext() }else{ e.slidePrev() }

    })
  };
const goToSlide1 = async () => {
    const swiper = mySlides.current?.getSwiper();        
    swiper?.then((e)=>{
        e.slideTo(0)
    })
  };
const goToSlide2 = async () => {
    const swiper = mySlides.current?.getSwiper();        
    swiper?.then((e)=>{
        e.slideTo(1)
    })
  };

const goToSlide3 = async () => {
    const swiper = mySlides.current?.getSwiper();        
    swiper?.then((e)=>{
        e.slideTo(2)
    })
  };
return (
    <IonPage>
        <IonContent className='overflow-hidden'>     
            <IonCard className='card-size'>
            <IonSlides pager={false} options={slideOpts} ref={mySlides} 
            onIonSlideDidChange={(e)=>{
                // console.log('e value',e)
                // onBtnClicked()
                }}>
                <IonSlide>
                    <IonCardContent className='pad-0'>
                    <IonGrid className='pad-0'>
                        <img src={ require(`../../images/backgound.png`).default} className="img-slide" height={71} width={71} alt="" />
                    </IonGrid>   
                    {/* <br/> */}
                    <IonGrid>
                        {/* <br/> */}
                        <div className='ion-text-align-center'>
                        <span className="dot active" onClick={goToSlide1}></span> 
                        <span className="dot" onClick={goToSlide2}></span> 
                        <span className="dot" onClick={goToSlide3}></span> 
                        </div>
                    </IonGrid>                     
                    <h1>Slide 1</h1>
                    <button onClick={()=>onBtnClicked('next')}>Next</button>
                    </IonCardContent>
                </IonSlide>                    
                <IonSlide>
                    <IonCardContent className='pad-0'>
                    <IonGrid className='pad-0'>
                        <img src={ require(`../../images/backgound.png`).default} className="img-slide" height={71} width={71} alt="" />
                    </IonGrid>   
                    {/* <br/> */}
                    <IonGrid>
                        {/* <br/> */}
                        <div className='ion-text-align-center'>
                        <span className="dot" onClick={goToSlide1}></span> 
                        <span className="dot active" onClick={goToSlide2}></span> 
                        <span className="dot" onClick={goToSlide3}></span> 
                        </div>
                    </IonGrid>                     
                    <h1>Slide 2</h1>
                    <button onClick={()=>onBtnClicked('prev')}>Prev</button>--<button onClick={()=>onBtnClicked('next')}>Next</button>
                    </IonCardContent>

                </IonSlide>
                <IonSlide>
                <IonCardContent className='pad-0'>
                    <IonGrid className='pad-0'>
                        <img src={ require(`../../images/backgound.png`).default} className="img-slide" height={71} width={71} alt="" />
                    </IonGrid>   
                    {/* <br/> */}
                    <IonGrid>
                        {/* <br/> */}
                        <div className='ion-text-align-center'>
                        <span className="dot" onClick={goToSlide1}></span> 
                        <span className="dot" onClick={goToSlide2}></span> 
                        <span className="dot active" onClick={goToSlide3}></span> 
                        </div>
                    </IonGrid>                     
                    <h1>Slide 3</h1>
                    <button onClick={()=>onBtnClicked('prev')}>Prev</button>
                    </IonCardContent>

                </IonSlide>
            </IonSlides>

            </IonCard>       
        
        </IonContent>
    </IonPage>
);

};

Answer 2

  // 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