方向改变时如何更新反应滑动器？答案

【问题标题】：How to update react swiper when orientation change?方向改变时如何更新反应滑动器？
【发布时间】：2020-09-07 17:15:46
【问题描述】：

当我在平板电脑上更改方向时，滑块会中断（显示 1 个损坏的幻灯片）。预期的行为（2 张纵向 50% 宽度的幻灯片）。我尝试使用 ref.current.swiper.update() 进行修复，但它不起作用

const ref = useRef()
const handleResize = () => {
  ref?.current.swiper.update()
}

useEventListener('resize', handleResize)

<Swiper
  loop
  watchOverflow
  ref={ref}
  className="apartment-swiper"
  breakpoints={{
    768: {
      slidesPerView: 'auto',
    },
    1280: {
      slidesPerView: 1,
    },
  }}
>
  {photo?.map((item, index) => (
    <SwiperSlide className="swiper-slide" key={index}>
      <img className="swiper-slide" src={item.url} alt="slide" />
    </SwiperSlide>
  ))}
</Swiper>

【问题讨论】：

标签： javascript css reactjs swiper

【解决方案1】：

尝试添加 parameters updateOnWindowResize 或 observer 属性

<Swiper
 loop
 watchOverflow
 observer={'true'}
 className="apartment-swiper"
 breakpoints={{
   768: {
     slidesPerView: 'auto',
   },
   1280: {
     slidesPerView: 1,
   },
 }}
>
 {photo?.map((item, index) => (
   <SwiperSlide className="swiper-slide" key={index}>
     <img className="swiper-slide" src={item.url} alt="slide" />
   </SwiperSlide>
 ))}
</Swiper>

【讨论】：

【解决方案2】：

这个问题 - swiperRef1.current.swiper.autoplay.timeout = 366 by def!:) 待办事项：

console.log(swiperRef1.current.swiper)
        swiperRef1.current.swiper.autoplay.timeout = 3;
        console.log(swiperRef1.current.swiper.autoplay.timeout)

【讨论】：