slidesPerColumn param update does not correctly render slides

CodeSandbox: https://codesandbox.io/s/reactidswiper-slidespercolumn-update-issue-bww36?fontsize=14

What you did I am updating the slidesPerColumn param on window resize and re-rendering Swiper component with shouldSwiperUpdate set to true eg:

  useEffect(
    () => {
      if (swiper !== null) {
        swiper.on("resize", () => {
          if (window.innerWidth < 1024) {
            swiper.params.slidesPerColumn = 1
            swiper.params.slidesPerView = 1
          } else {
            swiper.params.slidesPerColumn = 3
            swiper.params.slidesPerView = 2
          }
          swiper.update();
        });
      }
    },
    [swiper]
  );

Expected Behavior Swiper should display 3 slides per column inside the Swiper container when window size > 1024

Actual Behavior Swiper displays only 1 slide per column at 100% of container height. slidesPerView renders correctly

[andrewjslack]

I have got it working on page load by setting init: false and then setting params before calling swiper.init()

eg:

  const setSlidePerColumn = swiper => () => {
    if (window.innerWidth < 1024) {
      swiper.params.slidesPerColumn = 1
      swiper.params.slidesPerView = 1
    } else {
      swiper.params.slidesPerColumn = 3
      swiper.params.slidesPerView = 2
    }
    swiper.init()
  }

  useEffect(() => {
    if (swiper !== null) {
      swiper.on('init', setSlidePerColumn(swiper))
      ....
    }
  }, [swiper])

However, it still does not update responsively on resizing and I am not sure how to handle this. I don’t think to destroy and recreate the swiper on each resize is feasible. Even if setting a timeout and waiting for a ‘done resizing’ event.

[ehssamimi]

the answer is here