求助：实现点击ul li列表项跳转至对应Swiper幻灯片

要实现点击上方列表项切换对应幻灯片，同时幻灯片切换时列表项同步激活的效果，核心是通过列表项点击事件触发Swiper切换，以及监听Swiper切换事件同步列表状态，具体实现如下：

实现步骤与代码 #

1. HTML结构 #

保持列表与幻灯片的一一对应关系，给初始激活的列表项添加active类：

<ul class="nav-list">
  <li class="active">列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
  <li>列表项6</li>
  <li>列表项7</li>
</ul>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">幻灯片1</div>
    <div class="swiper-slide">幻灯片2</div>
    <div class="swiper-slide">幻灯片3</div>
    <div class="swiper-slide">幻灯片4</div>
    <div class="swiper-slide">幻灯片5</div>
    <div class="swiper-slide">幻灯片6</div>
    <div class="swiper-slide">幻灯片7</div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

2. 基础样式 #

给列表项添加激活状态样式，明确区分当前选中项：

.nav-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 20px 0;
  gap: 10px;
}
.nav-list li {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.nav-list li.active {
  background-color: #2196F3;
  color: #fff;
  border-color: #2196F3;
}

.swiper-container {
  width: 100%;
  height: 300px;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: #f5f5f5;
}

3. JavaScript逻辑 #

初始化Swiper并绑定双向联动事件：

// 初始化Swiper实例
const swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop: false, // 若开启loop，需用realIndex替代activeIndex，见下方注意事项
});

const navItems = document.querySelectorAll('.nav-list li');

// 列表项点击切换对应幻灯片
navItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    swiper.slideTo(index);
    setActiveNav(index);
  });
});

// 幻灯片切换时同步列表激活状态
swiper.on('slideChange', () => {
  const activeIndex = swiper.loop ? swiper.realIndex : swiper.activeIndex;
  setActiveNav(activeIndex);
});

// 统一设置列表激活项的工具函数
function setActiveNav(activeIndex) {
  navItems.forEach((item, idx) => {
    item.classList.toggle('active', idx === activeIndex);
  });
}

关键注意事项 #

• Loop模式适配：如果开启Swiper的loop: true，activeIndex会包含复制的幻灯片索引，此时需要用swiper.realIndex获取真实的原幻灯片索引，避免列表激活状态错乱。
• DOM加载时机：确保Swiper初始化代码在DOM完全加载后执行（可将script标签放在</body>前，或包裹在DOMContentLoaded事件中）。

内容的提问来源于stack exchange，提问作者Mustafa Şatıroğlu