vue:引用swiper(vue-awesome-swiper)

npm install vue-awesome-swiper@3

全局引用：main.js

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);

​
<swiper class="ui-body-bottom-swiper" :options="swiperOption" ref="mySwiper"
@mouseenter.native="mouseEnter"
@mouseleave.native="mouseLeave">
    <swiper-slide class="ui-body-swiper-slide">
        <div class="ui-H-banner">
        //内容
        </div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
</swiper>

​

return {
   swiperOptionH1: {
        loop: true,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-nextH1",
          prevEl: ".swiper-button-prevH1",
        },
    },
}

鼠标触上去停止：

mouseEnter() {
   this.$refs.mySwiperH2.swiper.autoplay.stop();
},

鼠标离开滚动停止：

mouseLeave() {
   this.$refs.mySwiperH2.swiper.autoplay.start();
},