Vue中引入swiper 自动轮播

安装swiper

cnpm i swiper vue-awesome-swiper --save

在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'
Vue.use(VueAwesomeSwiper)

在相关组件使用

<div class="system-swiper">
  <swiper :options="swiperOption" ref="mySwiper" v-if="imgNewsList.length">
    <!-- v-if 用来判断是否为空 不判断的话不回循环 -->
    <swiper-slide v-for="(item, index) in imgNewsList" :key="index">
      <router-link :to="{ path: '***', query: { id: item.Id } }">
        <img style="height: 150px; width: 190px" :src="item.imgPath" />
        <p>{{ item.xwBt }}</p>
      </router-link>
    </swiper-slide>
  </swiper>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
</div>

初始化 data数据

//swiper 初始化
swiperOption: {
  slidesPerView: 5,
  spaceBetween: 30,
  loop: true, // 是否开启循环
  navigation: {
    nextEl: ".swiper-button-next", // 绑定上一个按钮
    prevEl: ".swiper-button-prev", // 绑定下一个按钮
  },
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
},

 相关样式

.system-swiper {
  width: 1200px;
  overflow: hidden;
  margin: 0px auto 0;
  height: 182px;
  background-color: #ffffff;
  text-align: center;
  position: relative;
  .swiper-slide {
    width: 216px;
    height: 173px;
  }
  margin-top: 10px;
  p {
    font-size: 14px;
  }
  img {
    display: inline-block;
    padding: 4px;
    border: 1px solid #bebebe;
  }
}
.swiper-button-next {
  background: url(../assets/img/btn-you.png) no-repeat;
  background-position: 7px 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  right: -18px;
  background-color: rgba(0, 0, 0, 0.35);
}
.swiper-button-prev {
  background: url(../assets/img/btn-zuo.png) no-repeat;
  background-position: 19px 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  left: -18px;
  background-color: rgba(0, 0, 0, 0.35);
}