swiper+vue3 水平带左右箭头切换

先展示效果：


视图层：

<swiper
   :autoplay="swiper_options.autoplay"
   :loop="swiper_options.loop"
   :speed="swiper_options.speed"
   :pagination="false"
   :navigation="swiper_options.navigation"
   :spaceBetween="swiper_options.spaceBetween"
   :centeredSlides="swiper_options.centeredSlides"
   :slidesPerView="swiper_options.slidesPerView"
   class="swiper"
 >
   <swiper-slide>
     <div class="slide-one">
       <img src="../../../assets/img/personHome/card_1.png" alt="">
       <div class="slide-one-box">
         <div  class="slide-one-box-1">
           <p>课程教学</p>
           <span>GO!</span>
         </div>
         <div  class="slide-one-box-2">学习效果实时反馈，打造现代教学新体验</div>
       </div>
     </div>
   </swiper-slide>
   <swiper-slide>
     <div class="slide-one">
       <img src="../../../assets/img/personHome/card_1.png" alt="">
       <div class="slide-one-box">
         <div  class="slide-one-box-1">
           <p>项目实践</p>
           <span>GO!</span>
         </div>
         <div  class="slide-one-box-2">以成果为导向，学生为中心，以教师为主导，强调课程目标达成</div>
       </div>
     </div>
   </swiper-slide>
   <swiper-slide>
     <div class="slide-one">
       <img src="../../../assets/img/personHome/card_1.png" alt="">
       <div class="slide-one-box">
         <div  class="slide-one-box-1">
           <p>综合实训</p>
           <span>GO!</span>
         </div>
         <div  class="slide-one-box-2">以成果为导向，以学生为中心，
以教师为主导，强调协同开发</div>
       </div>
     </div>
   </swiper-slide>
   <swiper-slide>
     2222
   </swiper-slide>
 </swiper>

逻辑层：

import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle.min.css'
import SwiperCore, { EffectCoverflow, Pagination, Autoplay, Navigation } from 'swiper'
SwiperCore.use([Autoplay, EffectCoverflow, Pagination, Navigation])

export default {
  name: 'AnimateCom',
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    // const swiper = document.querySelector('.swiper-container').swiper
    onMounted(() => {
      // fInitSwiper()
    })
    let swiper_options = reactive({
      autoplay: {
        disableOnInteraction: false, // 鼠标滑动后继续自动播放
        delay: 400000 // 4秒切换一次
      },
      speed: 500, // 切换过渡速度
      loop: false,
      slidesPerView: 3, // 解决最后一张切换到第一张中间的空白
      centeredSlides: false, // 设置slide居中
      spaceBetween: 30,
      coverflowEffect: {
        rotate: 50, // slide做3d旋转时Y轴的旋转角度。默认50。
        //   stretch: 50, // 每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。
        //   depth: 100, // slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
        //   modifier: 1 // depth和rotate和stretch的倍率，相当于            depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
        slideShadows: false // 开启slide阴影。默认 true。
      },
      navigation: {
        nextElRef: '.swiper-button-next',
        prevElRef: '.swiper-button-prev'
      },
      pagination: {
        clickable: true
      }
    })
    return {
      swiper_options
    }
  }
}

:coverflowEffect="swiper_options.coverflowEffect"
是增加3d效果,结合css3属性一起使用
.swiper-container-3d .swiper-slide{
      transform-style: preserve-3d;
 }