How to lock slides in Ionic 5 in React

Issue

I don't have any idea how to lock slides in eg first IonSlide. I didn't find explanation in web.

const Slider: React.FC = () => {
return(
<IonApp>
    <IonContent >

 <IonSlides>

        <IonSlide >
         ...
        </IonSlide>

        <IonSlide>

          ...
        </IonSlide>

 </IonSlides>
</IonContent>
</IonApp>
)
}

Solution

Take a look at the useRef Hook. You can get a reference to your ion-slides element and call the lockSwipes method after the Swiper initialization using the ionSlidesDidLoad event:

import React, { useRef } from 'react';

const Slider: React.FC = () => {
  const slidesEl = useRef(document.createElement('ion-slides'))

  const handleSlidesLoad = () => {
    slidesEl.current.lockSwipes(true)
  }
  return (
    <IonApp>
      <IonContent>
        <IonSlides onIonSlidesDidLoad={() => handleSlidesLoad()} ref={slidesEl}>
          <IonSlide>
            ...
          </IonSlide>
          <IonSlide>
            ...
          </IonSlide>
        </IonSlides>
      </IonContent>
    </IonApp>
  )
}

Answered By - htmn