投稿

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

Vedu • • 资源分享 • 阅读 2457

介绍

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-01-10 07:01
下一篇 2021-01-10 12:06

相关推荐

发表评论

登录后才能评论