亲宝软件园·资讯

展开

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

朝着全栈加速前进 人气:0

正文

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

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

Swiper 的参数

其他参数配置可参考官方 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>

注:

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

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

其它方式

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

加载全部内容

相关教程
猜你喜欢
用户评论