Блог

Когда я меняю ориентацию на планшете, ползунок ломается (показывает 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>
  

попробуйте добавить параметры 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>

  

Эта проблема — swiperRef1.current.swiper.autoplay.timeout = 366 по def!:) Чтобы сделать:

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