vue中使用swiper5方式
作者：闪电松鼠~
这篇文章主要介绍了vue中使用swiper5方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue使用swiper5
官网使用方法 详情 ：Swiper使用方法 - Swiper中文网
在vue中使用 首先 npm install --save swiper@5 // 安装5.xx版本的swiper
1. 引入css js 文件
由于在多个组件中使用 所以直接在路口文件中引入css文件
在需要使用轮播图的组件中引入js文件
2.在需要使用轮播图的组件中生成dom结构
可以直接去swiper官网复制
3.watch监听数据，确保swiper渲染时一定有数据
$nextTick 确保 new swiper时 一定有dom结构
($nextTick 经常与操作dom的动作一块使用，$nextTick 可以确保dom已经生成)
vue使用swiper5做一个轮播图，带有分页器、左右箭头样式
折腾了半天，可算弄好了。记成文章，防止遗忘。
1.npm安装
由于swiper5以上才支持pagination分页器换颜色，所以我们安装swiper5以及vue-awesome-swiper
npm install swiper@5.4.4 vue-awesome-swiper --save
2.所有代码
<template>
<div>
<div>
<swiper :options="swiperOptions" class="my-swiper">
<swiper-slide> <img src="../assets/img/bg_1.jpg" /> </swiper-slide>
<swiper-slide> <img src="../assets/img/bg_2.jpg" /> </swiper-slide>
<swiper-slide> <img src="../assets/img/bg_3.jpg" /> </swiper-slide>
<!-- 指示点 -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- 左右导航栏 -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</div>
</template>
<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'UserCenter',
components: {
Swiper,
SwiperSlide
},
data () {
return {
swiperOptions: {
// 循环
loop: true,
// 指示点
pagination: {
el: '.swiper-pagination',
clickable: true /* 分页器点可以点击切换 */
},
// 方向：横向或者纵向vertical
direction: 'horizontal',
// 自动播放
autoplay: {
delay: 5000,
disableOnInteraction: false
},
// 切换速度
speed: 600,
// 左右箭头按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
computed: {},
mounted () {},
methods: {}
}
</script>
<style scoped>
.my-swiper{
width: 100%;
height: auto;
--swiper-navigation-color: white; /*左右箭头按钮颜色*/
--swiper-pagination-color: white; /*pagination分页器颜色*/
}
.my-swiper img {
width: 100%;
height: auto;
}
</style>最后，看成品。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。