swiper轮播图按钮切换

Swiper是一个流行的轮播图插件，它提供了多种轮播图切换方式，包括按钮切换。

要实现按钮切换，可以在Swiper初始化时设置pagination参数，并将它设置为一个DOM元素，Swiper会自动为这个DOM元素生成按钮。例如：

HTML：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

JavaScript：

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

在这个例子中，Swiper会为class为`swiper-pagination`的DOM元素生成按钮，并且设置`clickable`为`true`可以使按钮可以被点击切换轮播图。

你也可以通过CSS自定义这些按钮的样式，例如：

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #fff;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

这样就可以设置按钮的大小和背景色，并且在激活状态下设置不透明度为1，使得当前按钮更加醒目。