vue使用swiper

1、下载

$ npm install swiper

 

2、在node-modules-->swiper-->dist中得到swiper.css和swiper.js

 

3、将得到的swiper.css和swiper.js复制到static中（为了防止eslint报错）

 

4、在xxx.项目中引入

@import "../../static/swiperUtil/dist/css/swiper.min.css";

...

import Swiper from '../../static/swiperUtil/dist/js/swiper'

 

5、案例

<style scoped lang="less">

@import "../../static/swiperUtil/dist/css/swiper.min.css";

.swiper-container {

  width:80%;

  height: 250px;

  background-color: #888888;

  .swiper-wrapper {

    background-color: #007aff;

    .sw-1 {

      background-color: #09BB07;

    }

    .sw-2 {

      background-color: #007aff;

    }

    .sw-3 {

      background-color: yellow;

    }

  }

}

</style>

<template>

  <div class="swiper-container">

    <div class="swiper-wrapper">

      <div class="swiper-slide sw-1">slider1</div>

      <div class="swiper-slide sw-2">slider2</div>

      <div class="swiper-slide sw-3">slider3</div>

    </div>

    <div class="swiper-pagination"></div>

  </div>

</template>



<script>

import Swiper from '../../static/swiperUtil/dist/js/swiper'

export default {

  name: 'swiper',

  data () {

    return {

    }

  },

  methods: {

    initSwiper () {

      let swip = new Swiper('.swiper-container', {

        // autoplay: true, // 自动滚动

        direction: 'horizontal', // 'vertical', 滚动方向

        effect: 'cube', // 切换效果

        pagination: {el: '.swiper-pagination'}, // 分页器

        initialSlide: 2 // 初始显示第三个

      })

      console.log(swip)

    }

  },

  mounted () {

    this.initSwiper()

  }

}

</script>