vue swiper6.8.1用法 自动播放，无限循环，过度等

<template>
  <div class="index">
    <div class="container">
      <div class="swiper-box">
        <swiper
            :slides-per-view="5" // 显示几个
          :centeredSlides="true"  // 设定为true时，active slide会居中
          :space-between="30"
          navigation
          :effect="'cube'"
          :loop="true"
          :pagination="{ clickable: true }"
           :autoplay='{
            "delay":2500,
            "disableOnInteraction":false
          }'
          @swiper="onSwiper"
          @slideChange="onSlideChange"
            :cubeEffect='{
            "shadow": false,
            "slideShadows": false,
              "shadowOffset": 20,
             "shadowScale": 0.94
            }'
        >
          <swiper-slide v-for="(item, index) in sliderList" :key="index">
            <a :href="'/#/product/'+item.id">
              <img :src="item.img" alt="">
            </a>
          </swiper-slide>
        </swiper>
      </div>
      <div class="ads-box"></div>
      <div class="banner"></div>
      <div class="product-box"></div>
    </div>
    <ServiceBar />
  </div>
</template>

<script>
import SwiperCore, { Navigation, Pagination, Scrollbar, EffectCube, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import ServiceBar from '../components/ServiceBar.vue'
import 'swiper/swiper.scss'
import 'swiper/components/navigation/navigation.scss'
import 'swiper/components/pagination/pagination.scss'
import 'swiper/components/scrollbar/scrollbar.scss'
import 'swiper/components/effect-cube/effect-cube.scss'

SwiperCore.use([Navigation, Pagination, Scrollbar, EffectCube, Autoplay])
export default {
  components: {
    ServiceBar,
    Swiper,
    SwiperSlide
  },
  name: 'index',
  data () {
    return {
      sliderList: [
        {
          id: '42',
          img: '/imgs/slider/slide-1.jpg'
        },
        {
          id: '45',
          img: '/imgs/slider/slide-2.jpg'
        },
        {
          id: '46',
          img: '/imgs/slider/slide-3.jpg'
        },
        {
          id: '',
          img: '/imgs/slider/slide-4.jpg'
        },
        {
          id: '',
          img: '/imgs/slider/slide-5.jpg'
        }
      ]
    }
  },
  methods: {
    onSwiper (swiper) {
      console.log(swiper)
    },
    onSlideChange () {
      console.log('slide change')
    }
  }
}
</script>

<style lang="scss">
  .index {
    .swiper-box {
      .swiper-container {
        height: 451px;
        img {
          width: 100%;
        } 
        .swiper-button-prev:after {
            padding: 11px;
            color: #fff;
            background: rgba(0,0,0,.5);
        }
        .swiper-button-next:after {
            padding: 11px;
            color: #fff;
            background: rgba(0,0,0,.5);
        }
      }
    }
  }
</style>

注意要用es6的方式去写，effect 用法改变了

slideShadows：开启slide阴影。默认 true。
shadow： 开启投影。默认 true。
shadowOffset：投影距离。默认 20，单位px。
shadowScale： 投影缩放比例。默认0.94。

中间active 放大  要重置overflow属性

.swiper-container {
          overflow: visible;
          .swiper-slide.swiper-slide-active img {
          transform:scale(1.2)
          }
           .swiper-slide img{
            display: block;
            width:100%;
            transition: transform .6s;
          }
        }