利用vue-awesome-swiper实现循环轮播图（多张图片显示）

轮播图效果

参考文档地址：vue-awesome-swipe API文档
有四张图片，可循环播放，从上至下，且第四张图片之后接着播放第一张，无限循环

一、安装依赖

npm install vue-awesome-swiper@3.4.2
npm install swiper@3.1.3

二、引入awesome-swiper

在组件中引入

import {
    
     swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')

三、template代码

 <template>
  <div class="store-right"
        @mouseenter="on_bot_enter"  // 鼠标移入：轮播图暂停播放
        @mouseleave="on_bot_leave">  // 鼠标移出：轮播图继续播放
    <!-- 人口库 -->
    <swiper  ref="mySwiper"
            :options="swiperOption"
            class="swiper-content swiper-container">
      <swiper-slide class="store-right-item">
        111    //放你想放的文字、图片等
      </swiper-slide>
      <swiper-slide class="store-right-item">
        222
      </swiper-slide>
      <swiper-slide class="store-right-item">
        333
      </swiper-slide>
      <swiper-slide class="store-right-item">
        444
      </swiper-slide>
    </swiper>
  </div>
</template> 

四、javascript代码

可调整swiperOption参数来控制播放方式

<script>
import {
    
     swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
export default {
    
    
  name: 'store',
  components: {
    
    
    swiper, swiperSlide
  },
  data () {
    
    
    return {
    
    
      swiperOption: {
    
    
        direction: 'vertical',
        height: 500,
        slidesPerView: 'auto',
        loop: true,
        spaceBetween: 0,
        speed: 4000,
        freeMode: false,
        freeModeMomentum: false,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        autoplay: {
    
    
          delay: 0,
          disableOnInteraction: false
        }
      },
    }
  },
  computed: {
    
    
    mySwiper () {
    
    
      return this.$refs.mySwiper.swiper
    }
  },
  methods: {
    
    
    on_bot_enter () {
    
    
      console.log('enter')
      this.mySwiper.stopAutoplay()
    },
    on_bot_leave () {
    
    
      console.log("leave")
      this.mySwiper.startAutoplay()
    }
  }
}
</script>

五、javascript代码

样式自定义，这里是我的样式，根据需要自己调整

<style scoped lang="scss">
.store-right {
    
    
  width: 300px;
  height: 900px;
  margin: 50px 0 0 500px;
  overflow: hidden;
}
.store-right-item {
    
    
  margin-top: 5px;
  width: 300px;
  height: 250px;
  background: url(../assets/images/xiaozhan.jpg) no-repeat;
  background-size: 100% 100%;
  padding: 25px 40px;
}
</style>