解决Swiper.js点击切换按钮无法设置幻灯片激活类的问题

问题根源 #

1. 选择器语法错误：原代码中选择器$('.elements .swiper-slide[aria-label="' + element + '"')缺少闭合方括号]，导致选择器失效。
2. 变量作用域与执行时机错误：element变量定义在点击事件回调内部，外部代码无法访问；且添加类的代码未放在点击事件中，仅在页面初始化时执行一次，无法响应点击操作。
3. HTML结构缺失属性：所有.swiper-slide元素未设置aria-label属性，即便选择器正确，也无法匹配目标滑块。
4. 手动操作类名不符合Swiper规范：Swiper通过内部状态管理滑块激活类，手动添加swiper-slide-active/swiper-slide-visible会破坏状态同步，应使用官方API切换滑块。

修正后的完整代码 #

HTML代码（补充滑块的aria-label）

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<body>
<div>
  <div class="swiper elements">
    <div class="swiper-wrapper">
      <div class="swiper-slide" aria-label="1 / 3">
        <img src="https://clubhouse.swingu.com/wp-content/uploads/2024/08/philcareer.jpg" />
      </div>
      <div class="swiper-slide" aria-label="2 / 3">
        <img src="https://clubhouse.swingu.com/wp-content/uploads/2024/08/2025schedule.jpg" />
      </div>
      <div class="swiper-slide" aria-label="3 / 3">
        <img src="https://clubhouse.swingu.com/wp-content/uploads/2024/08/scottiefedex.jpg" />
      </div>
    </div>
  </div>
  
  <div class="element">
    <ul>
      <li aria-label="1 / 3">One</li>
      <li aria-label="2 / 3">Two</li>
      <li aria-label="3 / 3">Three</li>
    </ul>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</body>
</html>

JS代码（使用Swiper API切换滑块，修正作用域）

$(function () {
  var elements = new Swiper(".elements", {
    effect: "fade",
    spaceBetween: 10,
    mousewheel: true,
    grabCursor: true,
    fadeEffect: {
      crossFade: true,
    }
  });

  $(".element li").on("click", function () {
    var elementLabel = $(this).attr('aria-label');
    
    // 切换li的激活类
    $(".element li").removeClass("actived");
    $(this).addClass("actived");

    // 找到对应aria-label的滑块索引，调用Swiper API切换
    var targetIndex = $('.elements .swiper-slide').filter(function() {
      return $(this).attr('aria-label') === elementLabel;
    }).index();
    
    elements.slideTo(targetIndex);
  });
});

CSS代码（保持不变）

.element li {color:blue;}
.element li.actived {color:red;}

关键说明 #

• 使用slideTo方法是Swiper官方推荐的滑块切换方式，会自动同步激活类和内部状态，避免手动操作类名的冲突问题。
• 补充滑块的aria-label属性，确保能通过标签匹配到目标滑块。
• 将滑块切换逻辑移入点击事件回调内部，保证点击时执行切换操作，且能正确访问elementLabel变量。

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