javascript - 当我更新 swiper 实例（Swiper JS）时，Swiper 包装器没有更新

Question

我有四个按钮可以根据用户选择显示/隐藏幻灯片卡。我默认显示所有产品总共 10 张卡片。当更改为其他选项（只有四张卡片的幻灯片）时，会留下一个空白区域。我尝试使用 $productSlider.update() 进行更新，但没有成功。

演示代码（codesandbox）

刷卡初始化

let $productSlider = new Swiper('.plan-slider-container', {
  init: false,
  observer: true,
  observeParents: true,
  observeSlideChildren: true,
  spaceBetween: 0,
  mousewheel: {
    releaseOnEdges: true,
    forceToAxis: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  keyboard: true,
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
    hide: false,
  },
  breakpoints: {
    320: {
      slidesPerView: 1,
    },
    768: {
      freeMode: true,
      slidesPerView: 'auto'
    }
  }
});

用户选择按钮

$('.choice-plan-btn-wrapper.desktop').on('click', e => {
  let target = e.target;
  let id = target.getAttribute('id');
  let $parent = $(target).parent();
  let lastActiveSiblingId = $(target).siblings('.active').attr('id');

  if (target.tagName.toLowerCase() != 'button' || target.classList.contains('active')) return;

  // button
  $(target).addClass('active')
           .siblings('.active').removeClass('active');

  /* The Problem */
  $parent.siblings('.plans-swiper-wrapper')
         .children(`.${id}`).fadeIn('slow')
         .siblings().not(`.${id}`).fadeOut('slow');
  
  $productSlider.update();
  /* The Problem */
  
  $parent.siblings('.swiper-scrollbar')
         .removeClass(`${lastActiveSiblingId}`)
         .addClass(`${id}`)

  $productSlider.slideTo(0, 500);
});