vue + swiper 实现图片轮播

标签：ges   code   pad   radius   value   this   轮播   组件   bar   

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>

vue + swiper 实现图片轮播

标签：ges   code   pad   radius   value   this   轮播   组件   bar   

原文地址：https://www.cnblogs.com/yj19/p/11137352.html