vue-awesome-swipe 基于vue使用的轮播组件 使用

Posted 2020-09-29 凉生丿墨染

npm install vue-awesome-swiper --save  //基于vue使用的轮播组件

<template>
  <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(banner,index) in banners" :key="index">
        <img v-if="banner.src" :src="banner.src">
      </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
import { swiper, swiperSlide } from ‘vue-awesome-swiper‘

export default {
  data () {
    return {
      banners: [{ src: require(‘../img/1.jpg‘) }, { src: require(‘../img/4.jpg‘) }, { src: require(‘../img/5.jpg‘) }],
      swiperOption: {
        notNextTick: true,
        autoplay: 1000,
        pagination: ‘.swiper-pagination‘,
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true,
        onSlideChangeEnd: swiper => {
          this.page = swiper.realIndex + 1
          this.index = swiper.realIndex
        }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.swiper-wrapper {
  margin-top: 10px;
  height: 230px;
}

.swiper-wrapper img {
  width: 100%;
  height: 100%;
}
</style>