介绍

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 ; }}

动图演示

轮播图幻灯片