效果实现:
具体实现:
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