vue + swiper 实现图片轮播

1.安装swiper

    npm install swiper@3.4.1 --save-dev

2.在组件中引用 swiper

    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';

3.实例

<template>
  <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()"> <div class="slideshow"> <transition-group tag="ul" name="image"> <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> <a href="#"> <img :src='img'> </a> </li> </transition-group> </div> <div class="bar"> <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" @click="change(index)" :key="index"></span> </div> </div> </template> <script>

 

export default { data () { return { timer: null, //定时器 mark: 0, //比对图片索引的变量 imgArray: [//图片路径 require('../../assets/images/index/banner1.png'), require('../../assets/images/index/banner1.png'), require('../../assets/images/index/banner1.png'), require('../../assets/images/index/banner1.png') ] } }, methods: { autoPlay () { this.mark++; if (this.mark === 4) { this.mark = 0 } }, play () { this.timer = setInterval(this.autoPlay, 2500) }, change (i) { this.mark = i }, stop () { clearInterval(this.timer) }, move () { this.timer = setInterval(this.autoPlay, 2500) } }, created () { this.play() } } </script> <style scoped> * { margin: 0; padding: 0; list-style: none; } .slide { width: 100%; height: 320px; margin: 0 auto; overflow: hidden; position: relative; } .slideshow { width: 100%; height: 320px; } .slideshow ul{ width:100%; height: 320px; } li { width:100%; position: absolute; } .slideshow ul a{ display: inline-block; width:100%; } img { width: 100%; height: 320px; } .bar { position: absolute; width: 100%; bottom: 10px; margin: 0 auto; z-index: 10; text-align: center; } .bar span { width: 10px; height: 10px; border-radius:50%; background: white; display: inline-block; margin-right: 10px; } .active { background: red !important; } .image-enter-active { transform: translateX(0); transition: all 1.5s ease; } .image-leave-active { transform: translateX(-100%); transition: all 1.5s ease; } .image-enter { transform: translateX(100%); } .image-leave { transform: translateX(0); } </style>