vue3 结合 swiper实现轮播

效果实现：


具体实现：
1：安装依赖(我没有指定版本，大家可以指定具体的版本下载)

npm i swiper

2:页面中使用：

<script setup lang="ts">
	// https://swiperjs.com/vue
	import {Swiper, SwiperSlide} from 'swiper/vue' //引入swiper需要的组件
	import 'swiper/css' // 样式
	import {Autoplay} from 'swiper' //引入用到的 swiper 模块
	const modules = [Autoplay]
	const styleOption =ref({
	  '--swiperH':'900px'
	})
	//监听窗口变化，动态获取高度
	const setSwiperH =()=>{
	  styleOption.value['--swiperH']=`${document.documentElement.clientHeight}px`
	}
</<scrip>

<template>
  <swiper
      :slidesPerView="1"
      :spaceBetween="30"
      :loop="true"
      class="t-swiper"
      :speed="2500"
      :autoplay="{ delay: 2000, disableOnInteraction: false}"
      :modules="modules"
  >
    <swiper-slide><img class="swiper-img-class" src="@/assets/login.jpg" alt="" /></swiper-slide>
    <swiper-slide><img  class="swiper-img-class" src="@/assets/1.jpg" alt="" /></swiper-slide>
    <swiper-slide><img  class="swiper-img-class"  src="@/assets/2.jpg" alt="" /></swiper-slide>
  </swiper>
 </template>

样式：

.t-swiper{
  height: var(--swiperH);
}
.swiper-img-class{
    vertical-align: middle;
    border-style: none;
    width: 100%;
    height: 100%;
}

然后就可以实现了，需要的小伙伴们可以试下，有问题一起讨论。欢迎大家不吝赐教~。有问题可加v876942434