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

目录

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

正文

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

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

• 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.x使用swiperUI动态加载图片失败的解决方法
• vue3.x使用swiper实现卡片轮播
• vue中使用swiper失效问题及解决
• Vue中引入swiper报错的问题及解决
• swiper在vue中的简单使用方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！