vue3 項(xiàng)目使用swiper,自動(dòng)播放和左右切換都無效,折騰半天才能正常運(yùn)行,記錄一下代碼
參考鏈接
<script setup>
import SwiperCore, { Navigation, Autoplay, EffectFade } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/css/effect-fade';
//swiper 輪播
SwiperCore.use([Navigation, Autoplay, EffectFade]);
</script>
<template>
<swiper
class="swiper-container home-swiper"
loop
:autoplay="true"
:effect="'fade'"
:navigation="{ nextEl: '.s-next', prevEl: '.s-prev' }"
>
<swiper-slide class="swiper-slide" key="1">
<a class="btn" href="">
<img src="img/process2.png" alt="" />
</a>
</swiper-slide>
<a class="slide-arr s-prev" href="javascript:;"></a>
<a class="slide-arr s-next" href="javascript:;"></a>
</swiper>
</template>