npm i swiper@6.8.4 vue-awesome-swiper@4.1.1 --save-dev
实测有效!
JavaScript:
<script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper' import 'swiper/swiper.min.css' import 'swiper/swiper-bundle.css' import SwiperCore, { Autoplay, EffectFade } from 'swiper' SwiperCore.use([Autoplay, EffectFade]) export default { props: ['itemData', 'itemHeight'], components: { Swiper, SwiperSlide }, data() { return { swiperOptions: { direction: 'vertical', //设置竖向轮播 loop: true, autoplay: { pauseOnMouseEnter:true, // 最最重要 disableOnInteraction:false, // 最最重要 }, autoplayDisableOnInteraction: true, observer: true, speed: 3000 } } }, created() { }, methods: { onSlideChange(slide) { console.log(`监听slide`, slide) }, onSwiper(swiper) { console.log(`swiper:`, swiper); }, } } </script>
官方地址:https://www.swiper.com.cn/api/autoplay/496.html
标签:vue,EffectFade,slide,鼠标悬停,import,true,swiper From: https://www.cnblogs.com/herotxl/p/16914463.html