用户生成内容展示

User Generated Content Gallery

示例图片1
示例图片2
示例图片3
示例图片4
示例图片5
示例图片6
示例图片7
示例图片8
示例图片9

组件配置

使用说明

组件功能:

  • 自动循环滚动展示图片
  • 支持自定义网格布局
  • 平滑过渡动画效果
  • 导航指示器和左右切换按钮
  • 响应式设计,适配各种屏幕尺寸

如何使用:

1. 导入组件:import ImageGallery from "@/components/ImageGallery";

2. 准备图片数据数组:

const images = [
  {
    src: "图片URL",
    alt: "图片描述"
  },
  // 更多图片...
];

3. 使用组件:

<ImageGallery 
  images={images} 
  autoScrollInterval={5000} // 轮播间隔,单位毫秒
  gridRows={3}  // 网格行数 
  gridCols={3}  // 网格列数
  className=&quot;&quot;  // 可选的额外样式类
/>

提示: 使用此组件时,请确保图片数量足够填满至少一个完整网格。 组件会自动处理图片循环和分页。