介绍
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
动图演示
轮播图幻灯片