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轮播图的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue3 AST解析器-源码解析
这篇文章我们从 ast 生成时调用的 baseParse 函数分析，再到 baseParse 返回 createRoot 的调用结果，一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下
2021-09-09
vue项目打包自动更新版本号且自动刷新缓存的方法示例
这篇文章主要给大家介绍了关于vue项目打包自动更新版本号且自动刷新缓存的相关资料,文中通过代码及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
2024-11-11
vue项目中created()被调用多次的踩坑实战
在vue项目中我在created中调用了两次get数据请求,所以下面这篇文章主要给大家介绍了关于vue项目中created()被调用多次的踩坑实战,需要的朋友可以参考下
2023-03-03
Vue中使用Datav如何完成大屏基本布局
这篇文章主要介绍了Vue中使用Datav如何完成大屏基本布局问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-09-09
一文总结Vue和React的异同
这篇文章主要介绍了Vue和React的相同点不不同点，文中对比介绍的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-05-05
Vue-cli 使用json server在本地模拟请求数据的示例代码
本篇文章主要介绍了Vue-cli 使用json server在本地模拟请求数据的示例代码，非常具有实用价值，需要的朋友可以参考下
2017-11-11
构建Vue3桌面应用程序的方法
在项目中会用到 Electron ，一种最流行的框架，可使用Javascript构建跨平台的桌面应用程序。在本文中，我们将研究如何通过 Vite 开发 Vue 3 桌面项目，感兴趣的可以了解一下
2021-05-05
Electron 如何调用本地模块的方法
这篇文章主要介绍了Electron 如何调用本地模块的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
Vue3 Reactive响应式原理逻辑详解
这篇文章主要介绍了Vue3 Reactive响应式原理逻辑详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
vscode不支持nvue语法高亮的解决办法(图文详解)
这篇文章主要介绍了vscode不支持nvue语法高亮的解决办法,用vscode开发uniapp会遇到用.nvue开发的时候。但是vscode并没有提供.nvue的语法高亮，这篇文章给刚用vscode写.nvue的读者，需要的朋友可以参考下
2023-02-02