vue2使用swiper实现轮播图近大远小

        <swiper class="swiper-container" :options="swiperOption">
            <swiper-slide
              class="swiper-slide"
              v-for="(item, index) in part3List"
              :key="index"
              ><div><img class="icon1" src="~@/assets/hezuojigou.png" /></div>
              <div>{{ item.orgTypeName }}</div>
              <div class="fw">{{ item.num }}</div>
            </swiper-slide>
         </swiper>

 新版本的swiper不兼容vue2，应使用低版本，我这里使用的是4版本的。

npm install swiper vue-awesome-swiper@4

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";


import * as echarts from "echarts";
const modulesName = "home";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,//一页放几张
        spaceBetween: 30,//两张之间的间距
        loop: true, // 循环吗
        autoplay: {
          delay: 1000, // 等1秒下一个
          disableOnInteraction: false, // 中间滑动一下，取消自动吗？
        },
      },
     }
   }
}

样式仅供参考，可根据自己容器大小调整设置轮播项的宽度和缩放的大小

.swiper-container {
  width: 80%;
  position: relative;
  height: 200px;
  margin: 20px auto;
  perspective: 1100px; /* 设置透视效果，用于实现3D效果 */
  overflow: hidden;
  position: relative;
}
.swiper-slide {
  height: 95%;
  position: absolute;
  left: 43%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  border: #165dff dashed 2px;
  background-color: #f6f9ff;
  position: relative;
  transition: all 0.5s; /* 添加过渡效果 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.swiper-slide-active {
  flex: 0 0 35%; /* 设置当前轮播项的宽度为60% */
  z-index: 1; /* 提升当前轮播项的层级，使其在顶部 */
  transform: translateX(0) scale(1); /* 添加平移和缩放效果 */
  height: 200px; /* 设置当前轮播项的高度为140px */
}
.swiper-slide-next,
.swiper-slide-prev {
  flex: 0 0 30%; /* 设置其他轮播项的宽度为20% */
  opacity: 0.6; /* 设置其他轮播项的透明度 */
  transform: translateX(1.2) scale(0.7); /* 添加平移和缩放效果 */
  height: 180px; /* 设置其他轮播项的高度为120px */
}
.swiper-slide-next {
  transform-origin: right center; /* 设置变换的原点为右侧中心 */
  margin: 10px -45px; /* 设置非当前轮播项的间距 */
  z-index: -30;
}
.swiper-slide-prev {
  transform-origin: left center; /* 设置变换的原点为左侧中心 */
  margin-top: 10px;
  margin-right: -5px !important;
}