Title

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

posted @ 2022-11-22 11:04  谈亦行  阅读(823)  评论(0编辑  收藏  举报