手动显隐Swiper幻灯片后update方法失效，寻求技术解决

我之前也碰到过类似的坑，直接用jQuery的hide()/show()控制幻灯片显隐后调用update()经常不生效，核心原因是你直接修改了DOM的display属性，但Swiper内部维护的幻灯片状态（比如索引、布局计算逻辑）和实际DOM状态不匹配，而且observer选项主要监听的是DOM节点的添加/移除，不是display属性的变化。下面给你两个可行的解决方案：

方案一：使用Swiper内置方法管理幻灯片（推荐） #

Swiper本身提供了专门的幻灯片增删API，用这些方法能让内部状态和DOM完全同步，从根源避免布局错乱问题。具体步骤如下：

1. 页面加载完成后，先保存所有原始幻灯片的DOM节点副本
2. 切换分类时，移除当前所有幻灯片，再添加对应分类的目标幻灯片
3. 最后调用update()完成Swiper布局更新

代码示例：

// 页面初始化时保存所有原始幻灯片的DOM节点
const allSlides = Array.from(document.querySelectorAll('.swiper-slide'));

// 初始化Swiper（你的原有配置不变）
const swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  slidesPerColumn: 2,
  spaceBetween: 30,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

// 通用的分类过滤函数
function filterSlides(category) {
  // 移除当前所有幻灯片
  swiper.removeAllSlides();
  // 筛选目标分类的幻灯片（all则保留全部）
  const targetSlides = category === 'all' 
    ? allSlides 
    : allSlides.filter(slide => slide.classList.contains(category));
  // 将筛选后的幻灯片添加回Swiper
  targetSlides.forEach(slide => {
    // 克隆节点避免原DOM被多次操作，若不需要克隆可直接传入slide
    swiper.appendSlide(slide.cloneNode(true));
  });
  // 更新Swiper布局
  swiper.update();
}

// 绑定分类切换事件
$('#category1').on('click', () => filterSlides('Category1'));
$('#category2').on('click', () => filterSlides('Category2'));
$('#all').on('click', () => filterSlides('all'));

方案二：保留hide/show，但强制Swiper重新计算所有参数 #

如果你不想重新构建幻灯片结构，可以在hide()/show()后，依次调用多个Swiper的细分更新方法，强制它重新计算尺寸、偏移和整体布局：

另外注意你代码里的笔误：#category2的点击事件中，你写的是$('.Category1').show()，应该改成$('.Category2').show()！

修正后的代码：

$('#category1').on('click', function() {
  $('.swiper-slide').hide();
  $('.Category1').show();
  // 按顺序调用更新方法，确保Swiper重新计算所有布局参数
  swiper.updateSlidesSize(); // 更新幻灯片尺寸
  swiper.updateSlidesOffset(); // 更新幻灯片偏移量
  swiper.update(); // 最终更新整个实例
});

$('#category2').on('click', function() {
  $('.swiper-slide').hide();
  // 修正笔误：显示Category2的幻灯片
  $('.Category2').show();
  swiper.updateSlidesSize();
  swiper.updateSlidesOffset();
  swiper.update();
});

$('#all').on('click', function() {
  $('.swiper-slide').show();
  swiper.updateSlidesSize();
  swiper.updateSlidesOffset();
  swiper.update();
});

额外注意事项 #

如果你使用了UIkit的动画（比如uk-animation-slide-top-medium），动画过程中DOM尺寸会动态变化，可能导致Swiper的计算出错。可以在动画完成后再调用更新方法，示例如下：

$('#category1').on('click', function() {
  $('.swiper-slide').hide();
  const $targetSlides = $('.Category1').show();
  // 监听动画结束事件后再更新Swiper
  $targetSlides.one('animationend', () => {
    swiper.updateSlidesSize();
    swiper.updateSlidesOffset();
    swiper.update();
  });
});

内容的提问来源于stack exchange，提问作者MSKH