<Swiper
class="swiper-container mt-40px"
:modules="modules"
:loop="true"
:autoplay="{
delay: 5000,
}"
:speed="1000"
:slidesPerView="2"
:centeredSlides="true"
effect="coverflow"
:coverflowEffect="{
rotate: 0,
stretch: 300,
depth: 500,
modifier: 1,
scale: 0.9,
slideShadows: false,
}"
@swiper="onSwiper"
>
<SwiperSlide v-for="item in swipeItems" :key="item" class="item">
<img :src="item" class="w-781px h-559px" />
</SwiperSlide>
</Swiper>
// 轮播手动切换
<div class="flex mt-20px">
<i class="arrow mr-30px" @click="swiper.slidePrev()"></i>
<i class="arrow rotate-180" @click="swiper.slideNext()"></i>
</div>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, EffectCoverflow } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/autoplay'
const modules = [Autoplay, EffectCoverflow]
const swipeItems = [FourImg0, FourImg1, FourImg2, FourImg3, FourImg4]
const swiper = ref()
const onSwiper = s => {
swiper.value = s
}
中文文档：https://www.swiperjs.net/vue
swiper的api文档：https://www.swiper.com.cn/api/
参考例子：https://codepen.io/shams-sujon/pen/LQvWwX