swiper 顶部导航栏

如果你想实现一个带有导航栏的swiper，可以按照以下步骤操作：

1. 首先，在HTML文件中创建swiper的容器，并在其中添加一个导航栏的容器，如下所示：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- swiper的内容部分 -->
  </div>
  <div class="swiper-nav">
    <!-- 导航栏的内容部分 -->
  </div>
</div>

2. 在CSS文件中设置导航栏的样式，例如：

.swiper-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-nav .nav-item {
  margin-right: 20px;
  cursor: pointer;
}
.swiper-nav .nav-item.active {
  color: red;
}

这里的样式设置了导航栏的布局、导航标签的间距和激活状态的样式。

3. 在JS文件中使用swiper的API初始化swiper，并添加导航栏的事件监听，例如：

var mySwiper = new Swiper('.swiper-container', {
  // swiper的配置参数
});

var navItems = document.querySelectorAll('.swiper-nav .nav-item');
for (var i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener('click', function() {
    var index = this.getAttribute('data-index');
    mySwiper.slideTo(index);
  });
}

mySwiper.on('slideChange', function() {
  var activeIndex = mySwiper.activeIndex;
  for (var i = 0; i < navItems.length; i++) {
    if (i == activeIndex) {
      navItems[i].classList.add('active');
    } else {
      navItems[i].classList.remove('active');
    }
  }
});

这里的代码使用了swiper的API来初始化swiper，并添加了导航栏标签的事件监听，当标签被点击时，会跳转到对应的swiper页面。同时，还监听了swiper的滑动事件，根据当前swiper页面的索引来设置导航栏标签的激活状态。