vue中使用swiper轮播图片

1.安装swiper依赖

npm i swiper

安装完后，在nodel_modules文件中会有swiper文件夹，不指定版本，默认是安装的最新版本，最新版本中的css可能和实际使用的有差别，可以单独把需要的css，放在src的文件夹路径下，引用该css

2、引入css和js文件

import "_js/vendor/swiper/swiper.min.css";
import Swiper from "_js/vendor/swiper/swiper.min.js";

3、实例化swiper对象，并配合html

（1）实例化swpier对象

new Swiper(".swiper-container", {
        autoplay: 10000,
        autoplayDisableOnInteraction: false,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        slidesPerView: 4,
        loop: true,
      });


（2）html轮播内容：

<div class="swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide thumbnail">
          <img src="~_img/index/service-special-zone-bg-04.png" />
        </div>
        <div class="swiper-slide thumbnail">
          <img src="~_img/index/service-special-zone-bg-03.png" />
        </div>
        <div class="swiper-slide thumbnail">
          <img src="~_img/index/service-special-zone-bg-02.png" />
        </div>
        <div class="swiper-slide thumbnail">
          <img src="~_img/index/service-special-zone-bg-01.png" />
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

完整代码：

<template>
  <div class="swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide thumbnail">
          <img src="~_img/index/service-special-zone-bg-04.png" />
        </div>
        <div class="swiper-slide thumbnail">
          <img src="~_img/index/service-special-zone-bg-03.png" />
        </div>
        <div class="swiper-slide thumbnail">
          <img src="~_img/index/service-special-zone-bg-02.png" />
        </div>
        <div class="swiper-slide thumbnail">
          <img src="~_img/index/service-special-zone-bg-01.png" />
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
/* 引入swipercss */
import "_js/vendor/swiper/swiper.min.css";
// 引入swiper插件的js
import Swiper from "_js/vendor/swiper/swiper.min.js";
export default {
  name: "index",
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.myswiper2();
  },
  methods: {
    myswiper2: function () {
      new Swiper(".swiper-container", {
        autoplay: 10000,
        autoplayDisableOnInteraction: false,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        slidesPerView: 4,
        loop: true,
      });
    },
  },
};
</script>

<style lang="less" >
.swiper {
  width: 400px;
  height: 300px;
  margin: 0 auto;
}
.swiper .swiper-container {
  height: 160px;
}
.swiper img {
  widows: 100px;
  height: 100px;
}
.swiper .thumbnail {
  border: none;
}
.swiper .swiper-pagination {
  text-align: center;
  margin-top: 10px;
}

.swiper .swiper-pagination .swiper-pagination-switch {
  display: inline-block;
  margin: 0 10px;
  width: 50px;
  height: 5px;
  background-color: #224c98;
  opacity: 0.3;
  cursor: pointer;
}

.swiper .swiper-pagination .swiper-pagination-switch.swiper-active-switch {
  opacity: 1;
}
</style>

注意：

(1) swiper 方法，必须写在mounted 方法里

(2) 设置swiper轮播内容样式的时候，写的style里不要加scoped，加上scoped后，设置的轮播样式会不起作用。

错误写法：<style lang="less" scoped></style>

正确写法：<style lang="less" ></style>

(3)部分版本的swiper，使用可能会有差别，以下是我用的css和js

链接：https://pan.baidu.com/s/1O0nlB8lUcrXDoWktB5CCiQ
提取码：qwer

vue中使用swiper轮播图片

悦读