How to update react swiper when orientation change?

Question

[kirill321592]

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>

Comments

[Рональд Макдональд]

I try to fix with ref.current.swiper.update(), but it don't work

Vasya, sho za ponti? Sho za smes aglitskovo s brovarskim?

[posters]

Рональд Макдональд, ват ис зыс 'brovarski'?

[Рональд Макдональд]

posters, 6poBapbl eTo Takou EBponeu`ckuu` ropog.

[Danny Arty]

не по теме, но раз пишешь на англ: it doesn't work*

Answer 1

[Danny Arty]

Этому багу уже года 3 примерно. Тут решение
Если вдруг не разберетесь, как делать, то почитайте ветку тут