一，安装swiper

执行命令 npm install vue-awesome-swiper --save

二，引入swiper

import {Swiper} from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

 

三，去使用swiper，看代码。

<template>
  <div class="page">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="imgCard" src="../assets/swiper1.jpg" alt>
        </div>
        <div class="swiper-slide">
          <img class="imgCard" src="../assets/swiper2.jpg" alt>
        </div>
        <div class="swiper-slide">
          <img class="imgCard" src="../assets/swiper3.jpg" alt>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
export default {
  data() {
    return {
      dialogShow: false
    };
  },
  mounted() {
    this._initSwiper();
  },
  methods: {
    _initSwiper() {
      var mySwiper = new Swiper(".swiper-container", {
        direction: "horizontal",
        loop: true,
        autoplay: true, //自动轮播
        speed: 1000,
        pagination: {
          el: ".swiper-pagination",
          type: "custom",
          renderCustom: function(swiper, current, total) {
            var customPaginationHtml = "";
            for (var i = 0; i < total; i++) {
              //判断哪个分页器此刻应该被激活
              if (i == current - 1) {
                customPaginationHtml +=
                  '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
              } else {
                customPaginationHtml +=
                  '<span class="swiper-pagination-customs"></span>';
              }
            }
            return '<span class="swiperPag">'+customPaginationHtml+'</span>';
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" >
.swiperPag {
  width:4.5rem;
  height: 0.07rem;
  border-radius: 0.04rem;
  display: flex;
  align-items: center;
  margin:0 auto;
  background-color: rgba($color: #000000, $alpha: 0.8)
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom:0.27rem;
}
.swiper-pagination-customs {
  width: 1.5rem;
  height: 0.14rem;
  display: inline-block;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
  width: 1.5rem;
  height: 0.14rem;
  display: inline-block;
  border-radius: 0.07rem;
  background-color: #28a7e1;
}
</style>

注意：

• style标签不要加scoped,否则样式加不上！
• 直接npm install swiper --save 下载的是swiper4，build打包时，会报错如下： Unexpected token: name (Dom7) [./~/swiper/~/dom7/dist/dom7.modular.js:16,0][static/js/vendor.cf492f2bb7f8b02ec428.js:16311,6]

 到后来才发现，这样写是有问题的，当路由切换后再次进入该页面轮播就停止了，然后就做了如下更改。

export default {
  data() {
    return {
      dialogShow: false,
      mySwiper: {},
    };
  },
  activated() {
    this._initSwiper(); // 初始化swiper
  },
  deactivated() {
      this.mySwiper.destroy();// 销毁swiper
  },
  methods: {
    _initSwiper() {
      this.mySwiper = new Swiper(".swiper-container", {
        direction: "horizontal",
        loop: true,
        autoplay: true, //自动轮播
        speed: 1000,
        pagination: {
          el: ".swiper-pagination",
          type: "custom",
          renderCustom: function(swiper, current, total) {
            var customPaginationHtml = "";
            for (var i = 0; i < total; i++) {
              //判断哪个分页器此刻应该被激活
              if (i == current - 1) {
                customPaginationHtml +=
                  '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
              } else {
                customPaginationHtml +=
                  '<span class="swiper-pagination-customs"></span>';
              }
            }
            return '<span class="swiperPag">'+customPaginationHtml+'</span>';
          }
        }
      });
    }
  }
};

 

以上转载自：https://www.cnblogs.com/nicederen/p/10620534.html 

 

 

补充 ：

-----   小圆点，自定义样式  （以下css样式，都是放在标签<style>...</style>中测试的）

组件内样式穿透：

-----      /deep/ 是sass和less的样式穿透：

#pa /deep/ .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: rgba(0,0,0,0.2);
  }
  #pa /deep/ .swiper-pagination-bullet-active {
    color:#fff;
    background: #ff51d6;
  }

-----      >>> 是stylus的样式穿透：

  #pa >>> .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: rgba(0,0,0,0.2);
  }
  #pa >>> .swiper-pagination-bullet-active {
    color:#fff;
    background: #ff51d6;
  }

-----      scoped 的解释：

组件作用域内的 CSS
除非你把组件分布在多个文件上 (例如 CSS Modules)，CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时，也需要权衡 bundle 的尺寸和运行时的开销。
如果你是一个 CSS-in-JS 的爱好者，许多主流的 CSS-in-JS 库也都支持 Vue (比如 styled-components-vue 和 vue-emotion)。这里 React 和 Vue 主要的区别是，Vue 设置样式的默认方法是单文件组件里类似 style 的标签。
单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。

<style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。
最后，Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在