vue-awesome-swiper使用

vue-awesome-swiper使用

引入使用

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

具体代码

<swiper class="swiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide
        class="swiper-slide"
        v-for="(item, index) in imgLists"
        :key="index" 
      >
        <img class="swiper-image" @mouseover="stopPlay" @mouseout="play" :src="item.url" alt />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
</swiper>
<script>
export default {
  name: "HomeSwiper",
  // 子组件的data必须是个函数
  data() {
    return {
      imgLists: [{
          id:'1001',
          url:request("你的图片地址")
        },{
          id:'1002',
          url:request("你的图片地址")
        },{
          id:'1003',
          url:request("你的图片地址")
        }],
      swiperOption: {
        notNextTick: true, //循环
        autoplay: {
          delay: 6000, // 自动播放设置时间
          disableOnInteraction: false // 手动切换之后继续自动轮播
        },
        loop: true, // 循环
        directionType: "horizontal", // 方向
        pagination: {
          // 分页器
          el: ".swiper-pagination",
          clickable: true // 允许点击小圆点跳转
        },
        //点击下箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      }
    };
  },
  computed: {
    mySwiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    stopPlay() {
      this.mySwiper.autoplay.stop(); // 当手指触摸时停止自动播放
    },
    play() {
      this.mySwiper.autoplay.start(); // 当手指离开时开始自动播放
    }
  }
};
</script>

图片不要设置z-index:-999 css标签，不然点击无效