Swiper Js 幻灯片无法正常滑动

Question

我正在使用 swiperjs，但制作幻灯片时遇到困难因为他们不会捕捉到下一张幻灯片，我无法从他们那里获得活动索引这是我的代码
我哪里出错了我正在使用带离子框架的 typescript 和 swiperjs 版本 6.84

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

我忘了添加 ionContent，所以幻灯片没有以正确的方式做出反应，我还必须添加 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>

Swiper Js 幻灯片无法正常滑动

Swiperjs slides wont slide properly

javascript

typescript

reactjs

ionic-framework

swiperjs