Use swiper to rotate pictures in vue

1. Install swiper dependencies

npm in swiper

After installation, there will be a swiper folder in the nodel_modules file. If the version is not specified, the latest version is installed by default. The css in the latest version may be different from the actual one. You can put the required css in the src file separately Under the folder path, reference the css

2. Import css and js files

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

3. Instantiate the swiper object and cooperate with 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>

Full code:

<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>

Notice:

(1) The swiper method must be written in the mounted method

(2) When setting the style of the swiper carousel content, do not add scoped to the written style. After adding scoped, the set carousel style will not work.

Wrong way of writing: <style lang="less" scoped></style>

Correct writing: <style lang="less" ></style>

(3) There may be differences in the use of some versions of swiper. The following are the css and js I use

Link: https://pan.baidu.com/s/1O0nlB8lUcrXDoWktB5CCiQ
Extraction code: qwer

Use swiper to rotate pictures in vue

Guess you like