vue3中使用swiper完整版教程

介绍

在

vue3

中使用

swiper

, 实现轮播图的效果；如果组件样式等模块引入不当，很有可能导致，页面无效果；或者想要的箭头或者切换效果异常问题。具体使用方式如下所示：

使用方式

1. 使用命令 npm install swiper 安装 swiper插件；
2. 在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')

1. 在使用的页面，引入需要使用到的组件，比如常用的左右切换箭头，小圆点指示器等；如下所示：

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]constprevEl=(item, index)=>{// console.log('上一张' + index + item)};constnextEl=()=>{// console.log('下一张')};// 更改当前活动swiperconstonSlideChange=(swiper)=>{// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  console.log(swiper.activeIndex)}

1. 在页面中使用组件和相关的模块

<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><divclass="swiper-button-prev"@click.stop="prevEl(item, index)"/><!--左箭头。如果放置在swiper外面，需要自定义样式。--><divclass="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

就可以拖动底部的滚动条（轮播当中，一般不怎么会使用到这个属性）