基于swiper-slide-active类切换对应内容的实现求助

核心思路 #

通过监听Swiper切换事件或轮播项的swiper-slide-active类变化，同步控制对应内容区块的显示/隐藏状态，确保导航轮播与内容区状态一致。

具体实现方案 #

方案1：利用Swiper官方事件（推荐） #

Swiper自带slideChange事件，在轮播切换完成时触发，直接获取当前激活slide的标识类，匹配对应内容区块：

// 初始化Swiper实例（若未初始化）
var mySwiper = new Swiper('.swiper-container', {
  // 你的Swiper配置，示例：
  loop: false,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

// 监听轮播切换事件
mySwiper.on('slideChange', function() {
  // 隐藏所有内容区块
  $('.state1-content, .state2-content').hide();
  // 提取当前激活slide的state标识
  var activeState = $('.swiper-slide-active').attr('class').match(/state\d+/)[0];
  // 显示对应内容区块
  $('.' + activeState + '-content').show();
});

方案2：监听DOM类变化（兼容无Swiper实例场景） #

如果无法直接操作Swiper实例，可通过监听slide的类变化实现（注意：部分浏览器对该事件支持有限，优先用方案1）：

// 初始状态确保正确
$('.state2-content').hide();

// 监听slide的类变更
$('.swiper-slide').on('DOMSubtreeModified', function() {
  if ($(this).hasClass('swiper-slide-active')) {
    // 隐藏所有内容区块
    $('.state1-content, .state2-content').hide();
    // 提取当前slide的state标识
    var activeState = $(this).attr('class').match(/state\d+/)[0];
    // 显示对应内容区块
    $('.' + activeState + '-content').show();
  }
});

注意事项 #

• 确保内容区块类名与slide的标识类严格对应（如state1对应state1-content），避免匹配错误。
• 若有更多state项（如state3、state4），可将内容选择器改为[class*="-content"]，让代码更通用：

  $('[class*="-content"]').hide();
  

• 方案1是官方推荐方式，稳定性和性能优于DOM监听，优先采用。

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