@kirill321592

How to update react swiper when orientation change?

When i change orientation on tablet the slider breaks (shows 1 broken slide). Expected behavior ( 2 slides 50% width in portrait orientation). I try to fix with ref.current.swiper.update(), but it don't work

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>
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 1
DanArst
@DanArst
Э, Ойboy!
Этому багу уже года 3 примерно. Тут решение
Если вдруг не разберетесь, как делать, то почитайте ветку тут
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы