Reactjs中开源幻灯片组件react-image-galle

幻灯片组件 react-image-gallery

安装项目

npm install react-image-gallery

引入scss样式文件

import "../node_modules/react-image-gallery/styles/scss/image-gallery.scss";

或者引入css样式文件

import "../node_modules/react-image-gallery/styles/css/image-gallery.css";

简单实用例子

import ImageGallery from 'react-image-gallery';
 class MyComponent extends React.Component {
   handleImageLoad(event) { 
        console.log('Image loaded ', event.target) 
     } 
   render() { 
       const images = [ { original: 'http://lorempixel.com/1000/600/nature/1/', 
              thumbnail: 'http://lorempixel.com/250/150/nature/1/',      
              originalClass: 'featured-slide', 
              thumbnailClass: 'featured-thumb', 
              originalAlt: 'original-alt', 
              thumbnailAlt: 'thumbnail-alt',
              thumbnailLabel: 'Optional', 
              description: 'Optional description...', 
              srcSet: 'Optional srcset (responsive images src)', 
              sizes: 'Optional sizes (image sizes relative to the breakpoint)' }, 
              { original: 'http://lorempixel.com/1000/600/nature/2/', 
                 thumbnail: 'http://lorempixel.com/250/150/nature/2/' },
              { original: 'http://lorempixel.com/1000/600/nature/3/', 
                 thumbnail: 'http://lorempixel.com/250/150/nature/3/' } ]
         return ( <ImageGallery ref={i => this._imageGallery = i} 
                           items={images} slideInterval={2000} onImageLoad={this.handleImageLoad}/> ); }}

轮播图属性prop

· items: (required) Array of objects, see example above,
· infinite: Boolean, default true
o infinite sliding
  · lazyLoad: Boolean, default false
  · showNav: Boolean, default true
  · showThumbnails: Boolean, default true
  · showFullscreenButton: Boolean, default true
  · showPlayButton: Boolean, default true
  · showBullets: Boolean, default false
  · showIndex: Boolean, default false
  · autoPlay: Boolean, default false
  · disableThumbnailScroll: Boolean, default false
  · slideOnThumbnailHover: Boolean, default false
  · disableArrowKeys: Boolean, default false
  · disableSwipe: Boolean, default false
  · defaultImage: String, default undefined
   o an image src pointing to your default image if an image fails to load
   o handles both slide image, and thumbnail image
  · onImageError: Function, callback(event)
   o overrides defaultImage
  · onThumbnailError: Function, callback(event)
   o overrides defaultImage
  · indexSeparator: String, default ' / ', ignored if showIndex is false
  · slideInterval: Integer, default 3000
  · startIndex: Integer, default 0
  · onImageLoad: Function, callback(event)
  · onSlide: Function, callback(currentIndex)
  · onScreenChange: Function, callback(fullscreenElement)
  · onPause: Function, callback(currentIndex)
  · onPlay: Function, callback(currentIndex)
  · onClick: Function, callback(event)

github上的地址链接

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