首页 > 解决方案 > 如何动态更新 Swiper 以响应新的 Slide Array?

问题描述

我想动态检索数据并将其作为幻灯片插入到我的滑块中。我正在使用Swiper来执行此操作。但是,我遇到了问题,因为 Swiper 不会随着数组中幻灯片数量的增加而更新。只有当我在新幻灯片可用后重新初始化 Swiper 时,Swiper 才会找到新数组。我找到了在子项更新时重新初始化 Swiper的观察者参数。但是,我不能将其设置为活动,即observer:true不可能。

如何激活observer参数。我尝试过以下方法?

        <Swiper
          slidesPerView={1.2}
          spaceBetween={10}
          loop={false}
          centeredSlides={true}
          observer={true}
          observeParents={true}
          pagination={{
            clickable: true,
          }}
          onSlideChange={
            (swiper) =>
              handleIndexChange(swiper.activeIndex)
          }
          onSwiper={(swiper) => console.log(swiper)}
        >
          {ShowItems}
        </Swiper>

标签: javascriptreactjsswiper

解决方案


推荐阅读