今天小编给大家分享一下vue3中怎么使用swiper的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
介绍
在
vue3中使用
swiper, 实现轮播图的效果；如果组件样式等模块引入不当，很有可能导致，页面无效果；或者想要的箭头或者切换效果异常问题。具体使用方式如下所示：
使用方式
使用命令
npm install swiper安装
swiper插件；
在
main.js里使用样式文件，如下所示：
import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css';
createApp(App).use(VueAwesomeSwiper).use(router).mount('#app')在使用的页面，引入需要使用到的组件，比如常用的左右切换箭头，小圆点指示器等；如下所示：
import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式（按需导入）
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar' // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
const navigation = ref({
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const prevEl = (item, index) => {
// console.log('上一张' + index + item)
};
const nextEl = () => {
// console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper) => {
// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
console.log(swiper.activeIndex)
}在页面中使用组件和相关的模块
<swiper
:modules="modules"
:loop="true"
:slides-per-view="1"
:space-between="50"
:autoplay="{ delay: 4000, disableOnInteraction: false }"
:navigation="navigation"
:pagination="{ clickable: true }"
:scrollbar="{ draggable: false }"
class="swiperBox"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
<!--左箭头。如果放置在swiper外面，需要自定义样式。-->
<div class="swiper-button-next" @click.stop="nextEl" />
<!--右箭头。如果放置在swiper外面，需要自定义样式。-->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</swiper>参数介绍：
modules：
loop： 是否循环播放
slides-per-view：控制一次显示几张轮播图
space-between： 每张轮播图之间的距离，该属性不可以和
margin属性同时使用；
autoplay： 是否自动轮播，
delay为间隔的毫秒数；
disableOnInteraction属性默认是
true，也就是当用户手动滑动后
禁用自动播放， 设置为
false后，将不会禁用，会每次手动触发后再重新启动自动播放。
navigation： 定义左右切换箭头
pagination： 控制是否可以点击圆点指示器切换轮播
scrollbar： 是否显示轮播图的滚动条，
draggable设置为
true就可以拖动底部的滚动条（轮播当中，一般不怎么会使用到这个属性）