vue-cli2.0使用swiper

网上教程很多，但因为各个版本兼容等等问题，试了好久才引入运用成功。

以下是直接引用swiper的方式（非vue-awesome-swiper）
（vue-awesome-swiper的方式引用后有问题，目前不知道怎么解决）

安装

（其他版本可能存在一些问题，所以使用5版本）

npm install swiper@5

main.js引入样式

import "swiper/css/swiper.css"

在需要使用到的组件内引入swiper

import Swiper from 'swiper'

例子

<template>
  <div class="swiper-container"
       style="padding-top:60px;">
    <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>
</template>

<script>
import Swiper from 'swiper';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    new Swiper('.swiper-container', {
      loop: true,
      // 如果需要分页器
      autoplay: { // 自动播放
        delay: 2000, // 间隔时间的播放
        disableOnInteraction: false // 是否禁止交互(true: 点击上一页 或者 下一页 按钮，将不再自动播放)
      },
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  }
}
</script>

<style scoped>
.swiper-container {
  width: 500px;
  height: 300px;
  margin: 20px auto;
}
</style>

文档

官方文档：https://www.swiper.com.cn/api/index.html
官方示例：https://www.swiper.com.cn/demo/index.html

知识点记录

1. swiper设置无法鼠标拖动

swiper-container盒子加入类名swiper-no-swiping

2. slide宽度自适应

slidesPerView: 'auto'

3. 设置匀速播放

js中：

  mounted () {
    var mySwiper = new Swiper('.a', {
      loop: true,//循环模式
      speed: 4000,//播放熟读
      autoplay: { // 自动播放
        delay: 0, // 间隔时间的播放
      },
      slidesPerView: 'auto',
    })
  },

css中：

.swiper-container .swiper-wrapper {
  -webkit-transition-timing-function: linear; /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
}

4. 鼠标悬停停止播放，鼠标移开继续播放

  mounted () {
    var mySwiper = new Swiper('.a', {
      loop: true,//循环模式
      speed: 4000,//播放熟读
      autoplay: { // 自动播放
        delay: 0, // 间隔时间的播放
      },
      slidesPerView: 'auto',
    })
    mySwiper.el.onmouseover = function () { //鼠标放上暂停轮播
      mySwiper.autoplay.stop();
    }
    mySwiper.el.onmouseleave = function () { //鼠标移开暂停轮播
      mySwiper.autoplay.start();
    }
  },

5. 反向播放

autoplay: {
	reverseDirection: true,//反向播放
},

遇到问题记录

1. 左右两侧导航按钮定位被压住的问题

详情见另外一篇笔记：swiper两边导航按钮定位被压住的解决办法

2. 需要选中swiper-slide项添加样式时，出现两项同时添加样式的问题

详情见另外一篇笔记：swiper需要选中swiper-slide项添加样式时，出现两项同时添加样式的问题

3. 在style加了scoped的情况下，修改swiper样式不生效

需要加/deep/

<style lang="less" scoped>
  /deep/.swiper-pagination {
    position: static;
    margin-top: 83px;
    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background-color: #e9edf4;
      border-radius: 50%;
      opacity: 1;
    }
    span.swiper-pagination-bullet-active {
      background-color: var(--main-color);
    }
  }
</style>