swiper鼠标悬停(自由切换),拒绝大佬,珍爱生命!vue@2.x
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
我们不是一群默默无闻的码农,而是推进世界进步的开荒者