swiper插件实现图片轮播(版本3.4.2)

一、安装

1、下载依赖：cnpm install swiper@3.4.2 -S
2、引入

二、使用

<template>
  <div class="home">
    <div class="banner-box">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <p>123</p>
          </div>
          <div class="swiper-slide">
            <p>456</p>
          </div>
          <div class="swiper-slide">
            <p>789</p>
          </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 按钮 -->
        <div class="swiper-button-prev swiper-bt"></div>
        <div class="swiper-button-next swiper-bt"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "../../node_modules/swiper/dist/css/swiper.min.css";

export default {
  name: "Home",
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      this.initSwiper();
    });
  },
  methods: {
    initSwiper() {
      let mySwiper = new Swiper(".swiper-container", {
        slidesPerView: 1,
        spaceBetween: 30,
        pagination: ".swiper-pagination",
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        paginationClickable: true,
        autoplay: 3000,
        loop: true,
      });
    },
  },
};
</script>

注意：样式部分自己调。