swiper active-class使用

Swiper是一个流行的移动端轮播图插件，可以通过设置active-class来设置当前活动slide的样式。

具体使用方法如下：

1. 在HTML中设置swiper容器和swiper-slide元素，注意给每个swiper-slide元素添加一个唯一的class，例如：

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

2. 在CSS中设置每个swiper-slide元素的样式，例如：

.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  color: #fff;
  background-color: #333;
}

3. 在JS中初始化Swiper，并设置active-class，例如：

var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  centeredSlides: true,
  loop: true,
  spaceBetween: 30,
  // 设置当前活动slide的样式
  activeClass: 'active-slide',
});

4. 在CSS中设置active-slide类的样式，例如：

.active-slide {
  background-color: #f00;
}

这样，当用户滑动到某个slide时，该slide就会添加active-slide类，从而改变其背景颜色。