How to update react swiper when orientation change?

Question

css

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>

Answer 1

This bug is about 3 years old. Here is the solution
If you suddenly don’t figure out how to do it, then read the thread here