import SwiperCore, { Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
SwiperCore.use([Pagination]);
<Swiper
className="mySwiper"
slidesPerColumnFill={"row"}
slidesPerView={3}
slidesPerColumn={3}
slidesPerGroup={3}
spaceBetween={10}
pagination={{
clickable: true,
}}
>
{data.map((item, i) => {
return (
<SwiperSlide className="swiper-item" key={i}>
<Image src={item} alt={i} />
</SwiperSlide>
);
})}
</Swiper>
版本6.6.2
本文介绍如何使用Swiper轮播图组件实现一个具有分页功能的图片展示效果。通过配置参数,如每行显示的幻灯片数量、每组幻灯片数量等,实现特定布局,并利用map循环遍历数据源渲染图片。
1417

被折叠的 条评论
为什么被折叠?



