Vue 或者 React 都可以使用 Swiper 来实现轮播图,并且可以满足大部分使用场景。
在实现轮播图的过程踩了一些坑,并且由于 Vue2 和 Vue3 版本的差异,试了几种不同的写法,最终终于实现,轮播图的基础效果如下:
其他参数配置可参考官方 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>
注:
解决方案: 在引入的文件中将其改为:import 'swiper/swiper-bundle.css'
除了 Swiper ,还有一种更简便的方法,就是使用 ElementUI 或 Antd 的轮播图组件( Carousel 走马灯组件),可实现较为基础的需求。