swiper使用loop时，无法获取下标与跳转对应分页

初始化swiper

realIndexChange： 事件是在循环模式（loop: true）这个事件可以用来获取当前活动幻灯片的实际索引，而不是循环中的索引。
realIndex： 属性用于获取当前活动块的真实索引，与 activeIndex 不同的是，在循环模式下不会将复制的块的数量计算在内。您可以在 Swiper 初始化完成后，通过 slideChange 事件监听器获取 realIndex 来更新您的业务逻辑。

slideChange： 事件在幻灯片切换时触发。当您需要根据当前幻灯片的索引执行某些操作时，这个事件非常有用。在循环模式（loop: true）下，activeIndex 可能会因为 Swiper 复制了幻灯片而产生误导性的值。因此，您可能需要计算实际的索引值
activeIndex： 属性表示当前激活的幻灯片的索引。然而，当 Swiper 设置为循环模式（loop: true）时，activeIndex 可能会因为幻灯片的循环而产生误导。这是因为 Swiper 会在容器的前后各添加一份幻灯片的副本，以实现无缝滚动的效果

swiper = new Swiper('.swiper-container', {
    loop: true, // If we need pagination
    slidesPerView: 1.4, // 当前页面显示几个slide
    spaceBetween: 20,
    centeredSlides: true,
    initialSlide: 0, // 设置默认显示第一个幻灯片
    on: {
      init: function () {
        // swiper 初始化
      },
      realIndexChange: function () {
        // 处理下标
        swiperIndex.value = this.realIndex
      },
    }
})

loop：true时使用 slideToLoop 跳转对应分页

const handleClickPagination = (index) => {
  swiper.slideToLoop(index, 300)
}

Class 中间大两边小

  .swiper-slide {
    transition: 300ms;
    transform: scale(0.8);
  }
  .swiper-slide-active, .swiper-slide-duplicate-active {
    transform: scale(1);
  }