首先,swiper插件的官方网站为:https://www.swiper.com.cn/,其中包括了如何使用,如何更改轮播图样式的方法,后面遇到问题可以查swiper官网的API文档。
vue2推荐用Swiper5,vue3+推荐用Swiper6+。但注意,Swiper7默认容器是’.swiper’,而Swiper6一下使用的则是’swiper-contanier’。
下载Swiper包
npm install swiper@5
导入swiper
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
name: "Swiper",
props: {
banner: {
type: Array,
default: null
}
},
//因为axios请求图片资源是异步请求,而mounted是同步的生命周期,所以不加 的话去运行会没有js功能,
//所以需要在更新完毕banner之后,再进行js初始化
updated() {
new Swiper('.swiper-container', {
//direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
/* scrollbar: {
el: '.swiper-scrollbar',
}, */
//自动切换
autoplay: true,
//触摸比例
touchRatio: 2,
})
},
}
</script>
使用Swiper
<template>
<div class="swiper-main">
<div class="swiper-container">
<div class="swiper-wrapper">
<div v-for="item in banner" class="swiper-slide">
<a :href="item.link"> <img :src="item.image" alt=""></a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</template>
调整Swiper样式
<style>
.swiper-container {
display: flex;
margin: 0 auto;
--swiper-navigation-color: #666;
--swiper-navigation-size: 20px;
--swiper-pagination-color: #ff5777;
}
.swiper-slide img {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
}
</style>