[JavaScript知识库]vue中swiper，vue-awesome-swiper实现轮播；鼠标移入暂停，移除播放；点击暂停按钮暂停，再点击播放。

因为swiper和vue-awesome-swiper的版本较多，如果使用最新的版本，或者两者版本差距较大，就容易掉进很多的坑里面，各种报错。切记，版本一致，建议使用@3.X版本。

首先，安装swiper和vue-awesome-swiper

npm install swiper@3 vue-awesome-swiper@3 --save

然后，按需引入项目文件

     import { swiper,swiperSlide } from "vue-awesome-swiper";
     import "swiper/dist/css/swiper.css";

最后，在定义对于轮播属性方法

<template>
        <!--静态结构-->
        <swiper ref="mySwiper" :options="swiperOption">
            <swiper-slide class="swiper-slide">
                <div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div>
            </swiper-slide>
            <swiper-slide class="swiper-slide">
                <div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div>
            </swiper-slide>
            <swiper-slide class="swiper-slide">
                <div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div>
            </swiper-slide>
            <swiper-slide class="swiper-slide">
                <div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div>
            </swiper-slide>
            <swiper-slide class="swiper-slide">
                <div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div>
            </swiper-slide>
            <swiper-slide class="swiper-slide">
                <div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div>
            </swiper-slide>
        </swiper>

        <div class="playbtn">
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="el-icon-video-play" @click="stop"> </div>
            <div class="swiper-button-next" slot="button-next"></div>
        </div>
    </div>
</template>

    export default {
        data() {
            return {
                //点击播放暂停按钮
                btnplay: true, //默认播放

                //swiper轮播
                swiperOption: {
                    loop: true, //开启循环模式
                    navigation: {  //左右切换按钮
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    slidesPerView: 7,  //显示个数
                    spaceBetween: 40,  //每个模块的间距
                    autoplay: { //自动轮播
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false
                    },
                    pagination: {   //页数小点
                        el: ".swiper-pagination",
                        clickable: true //允许分页点击跳转
                    },
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },
        mounted() {
            this.swiper.slideTo(3, 1000, false);
        },
        methods: {
            stop() {  //通过调用鼠标移入移除间接实现暂停播放
                this.btnplay = !this.btnplay;
                this.btnplay ? this.on_bot_leave() : this.on_bot_enter();
            },
            on_bot_enter() {
                this.swiper.autoplay.stop();
            },
            on_bot_leave() {
                this.swiper.autoplay.start();
            },
        }
    }

以上代码，直接复制粘贴到相应的模块，直接就能使用，按自己的需求修改swiper相应的属性参数即可。

实现的简单效果如下：

?