VUE实现可拖拽轮播图实例（VueAwesomeSwiper使用实例）

VUE实现可拖拽轮播图实例（VueAwesomeSwiper使用实例）

安装：
npm install swiper vue-awesome-swiper --save
main.js中引入：

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper, /* { default global options } */);

<ul class="cur-box" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave" v-if="stry.length>3">
                    <swiper :options="swiperOption" ref="mySwiper">
                        <swiper-slide v-for="(item,index) in listTemp(3,stry)" :key="index" >
                            
                            <li class="cur-cell" v-for="(item2,index2) in listTemp(3,stry)[index]" :key="index2">
                                <a :href="item2.src">
                                    <div class="tx-box">
                                        <img :src="item2.zp" alt="" v-if="item2.zp">
                                    </div>
                                    <span class="name">{{item2.name}}</span>
                                    <span class="stts">失脱天数：</span>
                                    <span class="num" :class="{ lv_b: item2.lv==1, lv_y: item2.lv==2, lv_r: item2.lv==3 }">{{item2.num}}</span>
                                </a>
                            </li>
                            
                        </swiper-slide>
                    </swiper>
                </ul>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    data() {
        return {
        	stry: [ {name: '张三', num: '250', zp: require('../../assets/images/zp.png'), lv: 1, src: 'javascript:;'},
                {name: '张四', num: '250', lv: 2, src: 'javascript:;'},
                {name: '张五', num: '250', lv: 3, src: 'javascript:;'},
                {name: '张六', num: '250', lv: 1, src: 'javascript:;'},
                {name: '张七', num: '250', lv: 2, src: 'javascript:;'},
                {name: '张八', num: '250', lv: 3, src: 'javascript:;'} ],
            swiperOption: {
                //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                //notNextTick: true,
                //循环
                loop: true,
                //自动播放
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: true,
                    /* 触摸滑动后是否继续轮播 */
                    disableOnInteraction: false
                },
                //滑动速度
                speed: 5000,
                //滑动方向
                direction: 'vertical',
                //小手掌抓取滑动
                grabCursor: true,
            }
        }
        },
    components: {
        swiper,
        swiperSlide
    },
    methods: {
    	on_bot_enter() {
            this.$refs.mySwiper.swiper.stopAutoplay();//鼠标悬停时停止轮播
        },
        on_bot_leave() {
            this.$refs.mySwiper.swiper.startAutoplay();//鼠标离开时开始轮播
    }
       }
 </script>

这个实例实现了纵向轮播图，鼠标悬停时停止轮播，鼠标离开开始轮播，可用鼠标拖拽轮播图上下移动。