vue-cli中使用swiper

1.当前项目配置

cnpm install swiper vue-awesome-swiper --save

或指定版本下载

cnpm install swiper@5.4.5 vue-awesome-swiper --save

配置完成后可以在package.json中查看

 2.在main.js中加入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

最新版的

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)

3.在页面中使用

<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
      </div>
      <!-- 左右按钮 -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <!-- 小圆点-->
       <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
  import Swiper from "swiper";
  export default {
    name: "HelloWorld",
    mounted() {
      var mySwiper = new Swiper('.swiper-container', {
        loop : true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
          cirular: true
        },
        /*clickable :true,点击分页器的指示点分页器会控制Swiper切换。 */
        pagination: {
              el: '.swiper-pagination',
              clickable :true,
            },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      })
       /* 鼠标滑过pagination控制swiper切换*/
      for(let i=0;i<mySwiper.pagination.bullets.length;i++){
        mySwiper.pagination.bullets[i].onmouseover=function(){
          this.click();
        };
        //如果你在swiper初始化后才决定使用clickable，可以这样设置
        mySwiper.params.pagination.clickable = true ;
        //此外还需要重新初始化pagination
        mySwiper.pagination.destroy()
        mySwiper.pagination.init()
        mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');
      }
    }
  }
</script>
<style>
  .swiper-container {
    width: 600px;
    height: 300px;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>