介绍

react-image-gallery是一款支持缩略图的实用性图片预览组件，具备自动播放的功能，以及大量的自定义配置，属于比较实用一类的组件！

Github

https://github.com/xiaolin/react-image-gallery

特性

• 滑动手势
• 缩略图导航
• 全屏支持
• 自定义渲染的幻灯片
• RTL支持
• 响应式设计
• 大量的自定义配置
• 轻巧〜7kb压缩

快速入门

React Image Gallery需要React 16.0.0或更高版本。

npm install react-image-gallery

• 样式导入（使用webpack）

# SCSS
@import "~react-image-gallery/styles/scss/image-gallery.scss";

# CSS
@import "~react-image-gallery/styles/css/image-gallery.css";

• 范例

import ImageGallery from 'react-image-gallery';

const images = [
  {
    original: '原图地址1',
    thumbnail: '缩略图地址1',
  },
  {
    original: '原图地址2',
    thumbnail: '原图地址2',
  },
  {
    original: '原图地址3',
    thumbnail: '原图地址3',
  },
];

class MyGallery extends React.Component {
  render() {
    return ;
  }
}

动图演示

轮播图幻灯片