Vue cli3 使用 Swiper轮播

效果：

---

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

swiper中文网 下载地址

二、引入文件

app.vue 引入样式

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

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

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

三、添加 HTML

<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>
    <!-- 若是须要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 若是须要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

四、初始化一个轮播

/**初始化轮播图 */
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',
  },
});

五、修改一些样式

<style scoped>
    .swiper-container {
      width: 100%;
      height: 450px;
      /* background: #3399ff; */
      box-sizing: border-box;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 30px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    .swiper-container {
      --swiper-theme-color: #f00; /* 设置Swiper风格 */
      --swiper-pagination-color: #f00; /* 分页器颜色 */
      --swiper-navigation-color: #f00; /* 单独设置按钮颜色 */
      --swiper-navigation-size: 40px; /* 设置按钮大小 */
    }
</style>

<style>
    span.swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      outline: none;
      margin: 0 6px !important;
    }
</style>