vue框架中使用swiper滑动组件

Swiper滑动组件功能很强大也广泛应用于移动端打造滑动、触屏等功能，官网：https://www.swiper.com.cn/，说下在Vue中使用Swiper。

1.下载安装

用npm的方式：npm install swiper

2.组件中引入

import Swiper from ‘swiper’; 
import ‘swiper/dist/css/swiper.min.css’;

3.使用

<template>
  <div class="demo">
    <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for= "(item,index) in swiperList">
        <div class="box-c">{{item}}</div>
      </div>
    </div>
  </div>
  </div>
</template>

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

export default {
  name: "HelloWorld",
  data() {
    return {
      swiperList: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.swiperList = [5, 6, 7, 8];
      setTimeout(function() {
        var mySwiper = new Swiper(".swiper-container", {
          slidesPerView: 3,
          loop: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          }
        });
      }, 100);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.demo {
  width: 350px;
}
.box-c {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}
</style>