imagegallery–支持缩略图的React图片预览组件

介绍

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


支持缩略图的React图片预览组件—imagegallery

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 <ImageGallery items={images} />;
  }
}

动图演示

轮播图幻灯片

支持缩略图的React图片预览组件—imagegallery

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/19521.html

发表评论

登录后才能评论