Vue安装使用Swiper，做轮播图

swiper所有版本中swiper4的兼容性是最好的，组件在 swiper4之后没有很大改变，使用时最好选择swiper4。

1.安装

npm install swiper@4.5.1 --save-dev

cnpm install swiper@4.5.1 --save-dev

cnpm安装快速，也不会出现问题

2.main.js引入

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

 

3.使用代码

轮播图效果

 完整代码：

样式懒得调了，效果出来就行了，(●'◡'●)

<template>
  <div class="container">
    <div class="containerBox">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in pointImgList" :key="index">
            <a  target="_blank" :href="item.url">
              <div class="pic">
                <img class="img" :src="item.thumb1" alt="" style="height:500px; width:400px">
              </div>
            </a>      
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper"
export default {
  data() {
    return {
      pointImgList:[
        {
          thumb1: require('../assets/img/big_advert.jpg'),
        },
        {
          thumb1: require('../assets/img/banner_img5.jpg'),
        },
        {
          thumb1: require('../assets/img/About_bj.jpg'),
        },
        {
          thumb1: require('../assets/img/banner_img5.jpg'),
        },
        
      ]
    }
  },
  mounted() {
    this.bannerPoint()
  },
  created() {

  },
  methods: {
    bannerPoint(){
      new Swiper(".swiper-container", {
        loop: true,
          autoplay: {
            delay: 5000, //1秒切换一次
            disableOnInteraction: false
          },
          updateOnImagesReady: true,
          slidesPerView: 3,
          spaceBetween: 20,
          //spaceBetween : '10%',按container的百分比

          observer: true,
          observeParents: true,
          observeSlideChildren: true,
        
        pagination: {
          el: ".swiper-pagination",
          clickable :true,
        },
      })
    }
  },
}
  
</script>

<style>
.containerBox{
  width: 1500px;
  margin: 50px auto;
}
</style>

分页器，滚到条，前进后退按钮等如果需要，可以引入

swipe官方文档地址：中文api - Swiper中文网通过在线演示直观地了解Swiper3.x的基础配置、使用方法。查看中文API了解Swiper3.x的参数、属性、事件、回调函数等。https://www.swiper.com.cn/api/index.html