vue2中使用swiper@5.4.5

版本说明

about vue:

由于当前主流仍是vue2，所以本次使用vue2版本。

在博文最后，也会说明vue3版本的使用。

about swiper:

当前swiper已经到了7版本。

6版本及以上，已经支持了直接在前端框架中的使用。

6以下版本，不支持直接在前端框架中使用。

也就是说， 6以下版本，没有swiper-vue.js

about jquery:

由于使用swiper使用了固定的html内容，所以需要在html文件加载后，

才能使用swiper插件。

所以我们需要把配置内容，放在mounted里面：

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入

export default {
    name: 'CarouselShow',
    mounted() {
        new Swiper('.swiper-container', {
            autoplay: true,
            loop: true,
            // 其他配置...
        })
    }
}
</script>

用前准备

默认已经使用vue2创建了项目，此时需要安装一些js库：

yarn add swiper@5.4.5 // 注意版本，后面会介绍为啥选5.4.5

swiper的使用方法：

https://www.swiper.com.cn/usage/index.html

使用的时候，需要从这里拿基础代码。

代码案例：

https://gitee.com/guozia007/test-swiper5.45

效果展示：

https://guozia007.gitee.io/test-swiper5.45/

swiper的api配置项:

https://www.swiper.com.cn/api/

使用swiper

此处直接在vue2给的HelloWord组件上进行修改，把原有代码都删除，换成

给定的代码，即：

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1">Slide 1</div>
            <div class="swiper-slide swiper-slide2">Slide 2</div>
            <div class="swiper-slide swiper-slide3">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'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入

export default {
    name: 'HelloWorld',
    mounted() {
		var mySwiper = new Swiper('.swiper-container', {
			// config...
		})
	}
}
</script>

<style scoped>
.swiper-container {
    width: 500px;
    height: 400px;
}
.swiper-slide {
    text-align: center;
    line-height: 400px;
    color: #b0b0b0;
}
.swiper-slide1 {
    background: red;
}

.swiper-slide2 {
    background: blue;
}

.swiper-slide3 {
    background: yellow;
}
</style>

此时，已经能用了。

然后是各种api的配置，根据自己的需要，来选择不同的配置项。

主要配置项

loop

无限循环，即轮播到最后一张图之后，点击按钮，是否接着轮播第一张图。

默认为false 。表示不循环，即播放了最后一张，点击按钮无效，不会去播放第一张图片。

设置为true，播放到最后一张，点击按钮后，会继续播放第一张。

loop: true,

speed

speed: 800, // 滚动一张或者切换一张图片，需要的时间，单位ms，默认300ms

pagination

设置轮播图中的小圆点

pagination: {
  el: '.swiper-pagination',
},

配合着标签使用：

<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>

轮播的图片有几张，就会出现几个小圆点。

navigation

配置左右按钮

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

配合标签使用：

<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

effect

改变轮播图的效果

默认是一张一张的滑动轮播，

比如设置fade时，就可以让图片变成淡入淡出的方式进行轮播。

更多值可以查看api配置项。

autoplay

配置轮播图的自动播放功能，即用户不需要点击，轮播图会自动切换图片

该属性有两种配置方式，

第一种是直接配置boolean值，即false或者true。

默认为true，即不自动播放。

如果配置为true，就会自动播放。

autoplay: true,

该配置相当于：

autoplay: {
  delay: 3000, // 每次轮播间隔的ms数，默认3000ms
  stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认false
  disableOnInteraction: true, // 用户操作轮播图后，比如点击轮播按钮或小圆点，停止轮播
}

第二种配置方法：

autoplay: {
  delay: 3000, // 每次轮播间隔的ms数，默认3000ms
  stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认false
  disableOnInteraction: true, // 用户操作轮播图后，比如点击轮播按钮或小圆点，停止自动轮播
}

其中，

stopOnLastSlide设置为true，播放完最后一张，会停止播放

disableOnInteraction 设置为false，用户操作轮播图后，不会停止自动轮播。

即：

autoplay: {
  delay: 3000, // 每次轮播间隔的ms数，默认3000ms
  stopOnLastSlide: false, // 播放完最后一张图片后继续轮播
  disableOnInteraction: false, // 用户操作轮播图后，比如点击轮播按钮或小圆点，继续自动轮播
}

修改swiper中轮播图的样式

直接按照类名修改相应css属性即可。

比如设置宽高：

.swiper {
  width: 500px;
  height: 400px;
}

需要注意的是，如果原来的swiper类中，已经设置了某个属性，

但是新属性中又不需要这个属性，就可以按照下面的例子来处理：

假定原来的.swiper默认样式：

.swiper {
  left: 0;
}

假定我们此时不需要这个left属性，而是我们要自己定义一个right属性：

.swiper {
  left: unset;
  right: 10px;
}

修改小圆点样式

如果只修改小圆点颜色的话，

可以用--swiper-pagination-color: #fff;属性去修改小圆点颜色。

该属性不管style标签里有没有scoped属性，都会生效。

需要特别注意的是，在vue中，如果通过类名修改小圆点样式，

<style></style>这里面不能加scoped属性，

不然无法修改小圆点样式。

修改小圆点的样式，需要单独写一个不带scoped属性的标签。这样才能确保新样式生效。

比如就像这样：

<style lang="less" scoped>
/*这里是其他标签的样式*/
</style>

<style lang="less">
/*小圆点的样式，需要单独写一个不带scoped属性的style标签*/
.swiper-pagination-bullet {
    margin-left: 5px;

    &.swiper-pagination-bullet-active {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }
}
</style>

得到的效果就是这样的：
在这里插入图片描述

分页小圆点的相关配置项：

官方文档：https://www.swiper.com.cn/api/pagination/362.html

// 配置项
pagination: {
  el: '.swiper-pagination', // 包裹小圆点的类名，可自定义
  clickable: true, // 点击小圆点，也可以滚动轮播图。默认false
  type: 'bullets', // 分页器样式类型，默认bullets 圆点样式
  bulletElement: 'span', // 设置小圆点的标签，默认为span
  bulletClass: 'dot', // 修改小圆点类名，默认为swiper-pagination-bullet。
  // 如果修改了该类名，就要自己写相应的样式了
  bulletActiveClass: 'active', // 修改小圆点处于激活状态时的类名，默认为swiper-pagination-bullet-active
}

swiper7的使用

swiper7在vue3中使用。

安装：

yarn add swiper

swiper7不能在vue2中使用，

原因是，在swiper源码中，引入的8个vue方法都是vue3中的方法，在vue2中不存在。

如果在vue2中使用swiper7，会报错。

另外，vue3中使用swiper7，会有路径上的坑。

比如引入时，需要自己修改引入路径，不然会报错。

依照官方文档的引入方法为：

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

而这样的引入方式，vue会报错找不到引入的模块，

解决方法是，手动修改引入路径，

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';

  // Import Swiper styles
  import 'swiper/swiper.min.css';

正因为有这种坑，所以首选仍是6版本之前的swiper版本。

而6以前的最后一个稳定版本就是5.4.5版本。也无需担心这种坑的问题。

# javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

openEuler系统通过shell脚本安装openGauss 5.0.0企业版

avatar 华为云开发者联盟
cover

一文了解npm install -g和npm install --save-dev的关系

avatar 华为云开发者联盟
cover

【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（2）

avatar 华为云开发者联盟