Swiper滑块指定Slide文本与按钮显隐控制需求

步骤1：拆分HTML内容容器 #

把两种内容拆为独立模块，方便后续控制显隐：

<div class="swiper">
  <div class="swiper-wrapper">
    <!-- 第1、2张普通slide -->
    <div class="swiper-slide">
      <div class="swipe-text">swipe text</div>
      <div class="final-content">
        <p>Final Text and button</p>
        <button>操作按钮</button>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swipe-text">swipe text</div>
      <div class="final-content">
        <p>Final Text and button</p>
        <button>操作按钮</button>
      </div>
    </div>
    <!-- 第三张带特殊类的slide -->
    <div class="swiper-slide setting-up--active-col">
      <div class="swipe-text">swipe text</div>
      <div class="final-content">
        <p>Final Text and button</p>
        <button>操作按钮</button>
      </div>
    </div>
  </div>
</div>

步骤2：CSS精准控制显隐 #

通过类选择器区分普通slide和特殊slide的内容状态：

/* 默认状态：显示swipe文本，隐藏最终内容 */
.swipe-text {
  display: block;
}
.final-content {
  display: none;
}

/* 特殊slide反向控制：隐藏swipe文本，显示最终内容 */
.setting-up--active-col .swipe-text {
  display: none;
}
.setting-up--active-col .final-content {
  display: block;
}

步骤3：结合Swiper事件适配动态切换 #

如果Swiper开启了循环、自动切换等特性，需要监听切换事件确保状态同步：

const swiper = new Swiper('.swiper', {
  // 你的Swiper基础配置
  slidesPerView: 1,
  spaceBetween: 15
});

// 监听slide切换，实时更新内容显隐
swiper.on('slideChange', function() {
  document.querySelectorAll('.swiper-slide').forEach(slide => {
    const swipeText = slide.querySelector('.swipe-text');
    const finalContent = slide.querySelector('.final-content');
    const isActiveCol = slide.classList.contains('setting-up--active-col');
    
    swipeText.style.display = isActiveCol ? 'none' : 'block';
    finalContent.style.display = isActiveCol ? 'block' : 'none';
  });
});

// 初始化时触发一次，确保初始状态正确
swiper.emit('slideChange');

以上代码可实现需求：除带setting-up--active-col类的第三张slide外，其余slide显示“swipe text”；第三张slide隐藏该文本，显示最终内容和按钮。

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