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实现鼠标移入移出事件代码实例
这篇文章主要介绍了vue实现鼠标移入移出事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Vuex actions 异步操作方法详解
这篇文章主要介绍了Vuex actions 异步操作方法,需要的朋友可以参考下
2023-10-10
vue中使用vue-print.js实现多页打印
这篇文章主要介绍了vue中使用vue-print.js实现多页打印，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
详细聊聊Vue.js中的MVVM
MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码（代码隐藏）,更好地促进视图层开发与模式其余部分的分离,这篇文章主要给大家介绍了关于Vue.js中MVVM的相关资料,需要的朋友可以参考下
2022-03-03
基于Vue的Drawer组件实现
本文将从零实现一个Drawer抽屉组件，组件用 vue2 语法写的，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
preload对比prefetch的功能区别详解
这篇文章主要为大家介绍了preload对比prefetch的使用区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
Vue3引入SVG图标的流程步骤
我们在开发 Vue 项目的时候会使用一些前端组件库,例如 Element、Ant Design 等,这些组件库虽然方便,但是也有一些缺点,比如内置的图标太少,例如我们开发医疗、财务、工程等一些前端项目,内置的图标不能满足我们的需求,所以我们常常在Vue项目中引入SVG图标
2024-09-09
VUE注册全局组件和局部组件过程解析
这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
vue-router中的钩子函数和执行顺序说明
这篇文章主要介绍了vue-router中的钩子函数和执行顺序说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
用vue-cli开发vue时的代理设置方法
今天小编就为大家分享一篇用vue-cli开发vue时的代理设置方法，具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09