Swiperjs slides wont slide properly

Question

I am using swiperjs and I am having difficulty making the slides as they wont snap to the next slide and I cant get the active index from them this is my code
where am I going wrong I am using typescript and swiperjs version 6.84 with the ionic framework

import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'






  const pagination = {
    clickable: true,
  };
 
  return (
    <IonPage>
  

      <Swiper
        pagination={pagination}
        
        onBeforeSlideChangeStart={e => {
          setIndex(e.activeIndex)
        }}>
        <SwiperSlide >
          <item property={property} index={0} save={dispatch} activeIndex={index} />
        </SwiperSlide>
        <SwiperSlide >
            <item 2 property={property} index={1} />
        </SwiperSlide>
        <SwiperSlide >
            <item3 property={property} index={1} />
        </SwiperSlide>
      </Swiper>
      <IonButton
        disabled={true}
        onClick={(e) => {
          e.preventDefault();
        }}
        className={"next"}
        expand={"block"}
      >
        Save
      </IonButton>
    </IonPage>
  );
}

Answer 1

I forgot to add ionContent so the slides were not reacting in the correct way I also had to add observe

 <IonPage>
  
<IonContent fullscreen>
      <Swiper
        pagination={pagination}
        observeParents={true}
        observer={true}
        onBeforeSlideChangeStart={e => {
          setIndex(e.activeIndex)
        }}>
        <SwiperSlide >
          <item property={property} index={0} save={dispatch} activeIndex={index} />
        </SwiperSlide>
        <SwiperSlide >
            <item 2 property={property} index={1} />
        </SwiperSlide>
        <SwiperSlide >
            <item3 property={property} index={1} />
        </SwiperSlide>
      </Swiper>
      <IonButton
        disabled={true}
        onClick={(e) => {
          e.preventDefault();
        }}
        className={"next"}
        expand={"block"}
      >
        Save
      </IonButton>
</IonContent>
    </IonPage>