用户生成内容展示
User Generated Content Gallery
组件配置
使用说明
组件功能:
- 自动循环滚动展示图片
- 支持自定义网格布局
- 平滑过渡动画效果
- 导航指示器和左右切换按钮
- 响应式设计,适配各种屏幕尺寸
如何使用:
1. 导入组件:import ImageGallery from "@/components/ImageGallery";
2. 准备图片数据数组:
const images = [ { src: "图片URL", alt: "图片描述" }, // 更多图片... ];
3. 使用组件:
<ImageGallery images={images} autoScrollInterval={5000} // 轮播间隔,单位毫秒 gridRows={3} // 网格行数 gridCols={3} // 网格列数 className="" // 可选的额外样式类 />
提示: 使用此组件时,请确保图片数量足够填满至少一个完整网格。 组件会自动处理图片循环和分页。