求助：实现Swiper滑块激活时对应导航按钮同步激活

我需要实现以下功能：当第一个swiper-slide处于激活状态时，导航div中的第一个按钮同步变为激活状态，以此修改该圆形导航按钮的背景色。目前页面滚动时，swiper-wrapper的切换功能正常，仅需完成激活的swiper-slide与对应导航按钮的关联。尝试过CSS和JS方案都没解决，附上相关代码及效果截图，寻求帮助。

CSS代码 #

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.sections {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.foto1{
    background:
    linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)),
    url(images/beren.jpg);
    background-size: cover;
    background-position: center;
}
.foto2{
    background:
    linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)),
    url(images/adventure.jpg);
    background-size: cover;
    background-position: center;
}

.foto3{
    background-image: url(images/eekhoorn.jpg);
    background-size: cover;
    background-position: center;
}

.foto4{
    background-image: url(images/beren.jpg);
    background-size: cover;
    background-position: center;
}

.navigatie-front {
    position: absolute;
    left: 95%;
    top: calc(50% - 160px);
    height: auto;
    background-color: #fff;
    width: auto;
    display: flex;
    flex-direction: column;
    a {
       width: 50px;
       height: 50px;
       background-color: #f00;
       border-radius: 50%;
       margin: 15px 0px;
    }
}

HTML代码 #

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="http://arwinblog.localhost/arwinblog.localhost/wp-content/themes/nieuw/main.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="foto1 sections"></div>
    </div>

    <div class="swiper-slide">
      <div id="scroll" class="foto2 sections"></div>
    </div>

    <div class="swiper-slide">
      <div class="foto3 sections"></div>
    </div>

    <div class="swiper-slide">
      <div class="foto4 sections"></div>
    </div>
  </div>

  <div class="navigatie-front">
    <a id="button1"></a>
    <a id="button2"></a>
    <a id="button3"></a>
    <a id="button4"></a>
  </div>
</div>

效果截图 #

利用Swiper自带的滑动事件和状态回调，就能实现导航按钮与激活slide的同步，步骤如下：

1. 添加激活状态样式
   给导航按钮的激活状态设置区分色：

.navigatie-front a.active {
    background-color: #00f; /* 替换为你需要的激活背景色 */
}

2. 编写同步逻辑
   在main.js中添加以下代码，完成slide与按钮的关联：

// 初始化Swiper实例（根据实际滚动方向调整direction）
const swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  slidesPerView: 1,
  spaceBetween: 0,
  mousewheel: true,
});

// 获取所有导航按钮
const navButtons = document.querySelectorAll('.navigatie-front a');

// 设置初始激活状态
navButtons[0].classList.add('active');

// 监听slide切换事件，同步按钮状态
swiper.on('slideChange', function () {
  navButtons.forEach(btn => btn.classList.remove('active'));
  navButtons[this.activeIndex].classList.add('active');
});

// 点击按钮切换到对应slide
navButtons.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    swiper.slideTo(index);
  });
});

3. 注意事项

• 若你的Swiper是水平滚动，将direction: 'vertical'改为'horizontal'即可。
• 确保Swiper初始化代码在DOM加载完成后执行，可将代码包裹在DOMContentLoaded事件中，或放在页面底部。

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