vue中使用swiper

安装

npm install swiper@3 --save-dev

注册 — /src/viewas/main.js

import ‘swiper/dist/css/swiper.min.css’
import ‘swiper/dist/js/swiper.min’

使用

html

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
        <div class="swiper-slide">4</div>
        <div class="swiper-slide">5</div>
        <div class="swiper-slide">6</div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

CSS

 .swiper-container {
    width: 600px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    font-size: 30px;
  }

JavaScript

import Swiper from "swiper";
//方法一：
mounted(){
    new Swiper(".swiper-container", {
       // 如果需要前进后退按钮
       nextButton: ".swiper-button-next",
       prevButton: ".swiper-button-prev",
   });
}

//方法二
  created(){
      this.swiper();
  },
  methods: {
    swiper() {
      this.$nextTick(() => {
        new Swiper(".swiper-container", {
          // 如果需要前进后退按钮
          nextButton: ".swiper-button-next",
          prevButton: ".swiper-button-prev",
        });
      });
    },
  },