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

目录 正文 Swiper 的参数 代码实现 Error: Can‘t resolve ‘swiper/css/swiper.css‘ 如何解决 其它方式

正文

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

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

Swiper 的参数

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

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

代码实现

<template>
  <div class="swiperbox">
    <swiper
      :slidesPerView="1"
      :spaceBetween="30"
      :loop="true"
      :cente red Slides="true"
      :pa gin ation="{ clickable: true}"
      :autoplay="{ delay: 2500, disableOnInteraction: false}"
      :navigation="true"
      :modules="modules"
    >
      <swiper -s lide>< 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 } f rom  '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 & # 39;swiper/swiper-bundle.css'

其它方式

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

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

您可能感兴趣的文章: vue3.x使用swiperUI动态加载图片失败的解决方法 vue3.x使用swiper实现卡片轮播 vue中使用swiper失效问题及解决 Vue中引入swiper报错的问题及解决 swiper在vue中的简单使用方法

总结

以上是 为你收集整理的 Vue3使用Swiper实现轮播图示例详解 全部内容，希望文章能够帮你解决 Vue3使用Swiper实现轮播图示例详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue3使用Swiper实现轮播图示例详解的详细内容...