swiper 顶部导航栏，点击导航栏滑动居中

好的，如果你想实现一个带有顶部导航栏的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].setAttribute('data-index', i);
  navItems[i].addEventListener('click', function() {
    var index = this.getAttribute('data-index');
    mySwiper.slideTo(index, 500, false);
    mySwiper.slideToLoop(index + mySwiper.loopedSlides, 500, false);
    for (var j = 0; j < navItems.length; j++) {
      navItems[j].classList.remove('active');
    }
    this.classList.add('active');
    var offsetLeft = this.offsetLeft;
    var offsetWidth = this.offsetWidth;
    var containerWidth = document.querySelector('.swiper-nav').offsetWidth;
    var translateX = (containerWidth - offsetWidth) / 2 - offsetLeft;
    document.querySelector('.swiper-nav').style.transform = 'translateX(' + translateX + 'px)';
  });
}

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页面的索引来设置导航栏标签的激活状态。在点击导航栏标签时，还计算了标签的位置和大小，以及容器的大小，来计算需要移动的距离，并设置容器的transform属性来实现居中显示。