Vue3使用Swiper实现轮播图示例详解

更新时间：2023年02月12日 09:46:11 作者：朝着全栈加速前进

这篇文章主要为大家介绍了Vue3使用Swiper实现轮播图示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

Vue 或者 React 都可以使用 Swiper 来实现轮播图，并且可以满足大部分使用场景。

在实现轮播图的过程踩了一些坑，并且由于 Vue2 和 Vue3 版本的差异，试了几种不同的写法，最终终于实现，轮播图的基础效果如下：

Swiper 的参数

slidesPerView：每次显示几个轮播图
spaceBetween：每个轮播图之间的间距（单位：px）
loop：是否循环滚动
centeredSlides：是否居中对齐（true:居中，false：左对齐），默认 false 左对齐，
autoplay：是否自动播放
navigation：是否左右切换箭头
pagination：分页配置
- clickable：在点击分页圆点的时候，是否进行切换
scrollbar：显示滚动条
- draggable：滚动条可拖动
autoplay：切换图片的频率（毫秒为单位）
- delay：切换的时间（单位：毫秒ms）
- disableOnInteraction：滑动图片后不禁用自动播放 delay: 2500, disableOnInteraction: false,

其他参数配置可参考官方 API：Swiper

代码实现

<template>
  <div class="swiperbox">
    <swiper
      :slidesPerView="1"
      :spaceBetween="30"
      :loop="true"
      :centeredSlides="true"
      :pagination="{ clickable: true}"
      :autoplay="{ delay: 2500, disableOnInteraction: false}"
      :navigation="true"
      :modules="modules"
    >
      <swiper-slide><img src="@/assets/images/swiper1.png" alt="" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/swiper2.png" alt="" /></swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'// 分页器
// import 'swiper/swiper-bundle.css'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

const modules = [Autoplay, Pagination, Navigation, A11y]
</script>

注：

创建一个 modules 数组，目的是为了正常使用分页器和对应功能
如果是 setup 钩子函数的写法，注意最后要 return 分页相关的配置。

Error: Can‘t resolve ‘swiper/css/swiper.css‘ 如何解决

解决方案：在引入的文件中将其改为：import 'swiper/swiper-bundle.css'

其它方式

除了 Swiper ，还有一种更简便的方法，就是使用 ElementUI 或 Antd 的轮播图组件（ Carousel 走马灯组件），可实现较为基础的需求。

以上就是Vue3使用Swiper实现轮播图示例详解的详细内容，更多关于Vue3 Swiper轮播图的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

在vue上使用cesium开发三维地图的详细过程
这篇文章主要给大家介绍了关于在vue上使用cesium开发三维地图的详细过程,Cesium是一个强大的JavaScript库,支持三维地理信息展示,并提供了丰富的地理空间数据可视化功能,需要的朋友可以参考下
2023-12-12
vue中拆分组件的实战案例
最近在学vue,试着写个单页应用,在写组件,拆分组件时遇到一些困惑,下面这篇文章主要给大家介绍了关于vue中拆分组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
Vue 3.x+axios跨域方案的踩坑指南
这篇文章主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue 3.x具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
Vue 进阶之路（三）
这篇文章主要介绍了Vue 进阶之路，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue 3.0的attribute强制行为理解学习
这篇文章主要为大家介绍了Vue 3.0的attribute强制行为理解学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
详解Vue中CSS样式穿透问题
这篇文章主要介绍了VUE中CSS样式穿透问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
vue+axios+promise实际开发用法详解
这篇文章主要介绍了vue+axios+promise实际开发用法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
Vue开发Sort组件代码详解
这篇文章主要介绍了Vue开发Sort组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021-10-10
Vue表单验证插件的制作过程
这篇文章主要为大家详细介绍了Vue表单验证插件的制作过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
VUE3+mqtt封装解决多页面使用需重复连接等问题(附实例)
最近了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,下面这篇文章主要给大家介绍了关于VUE3+mqtt封装解决多页面使用需重复连接等问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-04-04