原生 swiper 轮播图中间突出

原生 Swiper 是一款流行的 JavaScript 轮播库，它允许你在网页上创建响应式的轮播效果。如果你想让 Swiper 中的一个滑动项在轮播中特别突出显示，你可以通过配置选项来实现。通常，这涉及到以下几个步骤：

1. **初始化 Swiper**：首先，在 HTML 上添加 Swiper 的容器，并在 JavaScript 或 TypeScript 中初始化组件。

<div class="swiper-container">
   <div class="swiper-wrapper">
      <!-- 每个滑动项 -->
      <div class="swiper-slide" data-active-class="active">...</div>
   </div>
   <div class="swiper-pagination"></div> <!-- 如果需要指示器 -->
</div>

<script src="swiper.min.js"></script>

2. **设置 activeSlide 的样式**：在 CSS 中为数据属性 `data-active-class` 对应的 `.active` 类添加样式，使其突出显示。例如：

.swiper-slide.active {
   background-color: #ff0; /* 使用你喜欢的颜色 */
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 可能需要的阴影效果 */
   transform: scale(1.1); /* 可调整放大效果 */
}

3. **配置 Swiper**：在初始化 Swiper 时，指定 `slideToActive` 参数，使得轮播开始时直接跳转到有 `data-active-class` 的滑动项。

var mySwiper = new Swiper('.swiper-container', {
   initialSlide: parseInt($('[data-active-class]').attr('data-slide-index')) // 获取激活滑动项索引
});

4. **动态切换突出滑块**：如果需要动态改变突出显示的滑块，可以监听 `slideChangeTransitionEnd` 事件来更新 `data-active-class`。

mySwiper.on('slideChangeTransitionEnd', function() {
   var currentIndex = this.clickedIndex;
   this.slides[currentIndex].classList.add('active');
});