Vue cli3 使用 Swiper轮播

效果：

---

1、进入swiper中文网下载引用文件

swiper中文网 下载地址

2、引入文件

app.vue 引入样式

@import url("./assets/css/swiper.min.css");

main.vue 需要使用轮播的组件（不能全局...没搞懂）引入js

import Swiper from '@/assets/js/swiper.min.js'

3、添加 HTML

    

      
Slide 1
      
Slide 2
      
Slide 3
    
    
    


    
    

    

4、初始化一个轮播

/**初始化轮播图 */
var mySwiper = new Swiper('.swiper-container', {
  loop: true, // 循环模式选项
  speed: 500, //切换时长
  // grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
  autoplay: {
    delay: 3000,   //自动切换延时
    stopOnLastSlide: false, //如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
    disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
  },
  keyboard: true,  //键盘切换

  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,  //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
  },

  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

5、修改一些样式