Note

I lost my npm credential and this package is no longer maintenance.

React image show

Simple React images slide show (carousel)

Install

npm i react-image-show

Demo

Check out demo online

Example

import React from 'react';
import SlideShow from 'react-image-show';

class MyComponent extends React.Component {
  render() {
    return (
      <SlideShow
        images={urlArray}
        width="920px"
        imagesWidth="800px"
        imagesHeight="450px"
        imagesHeightMobile="56vw"
        thumbnailsWidth="920px"
        thumbnailsHeight="12vw"
        indicators thumbnails fixedImagesHeight
      />
    );
  }

}

Props

| Property | Type | Description | Default | | ---------------- | ------ | ----------- | ------- | | images | array | Array of images URL | none | | fixedImagesHeight | bool | Enables fixed images height mode, fit height and then crop width to main aspect ratio, too narrow images will be center and arrow key navigation | false | | infinite | bool | Enable infinite scrolling mode | false | | indicators | bool | Show indicator | false | | thumbnails | bool | Show thumbnails | false | | arrows | bool | Show arrows | true | | width | string | Horizontal width of the carousel, include arrows, no apply in mobile mode, always 100% | 920px | | imagesWidth | string | Horizontal width of the image inside carousel, exclude arrows, always 100% on mobile | 800px | | imagesHeight | string | Height of the images when fixedImagesHeight is set | 450px | | imagesHeightMobile | string | Height of the images on mobile when fixedImagesHeight is set | 56vw | | thumbnailsWidth | string | Horizontal width of the thumbnails strip, always 100% on mobile | 920px | | thumbnailsHeight | string | Height of thumbnails strip width of the carousel | 12vw | | onImageClick | function | Image click callback | undefined | | onThumbnailsImageClick | function | Thumbnails Image click callback | undefined | | arrowWidth | string | Horizontal width of the arrows - you might want to set it to the same amount as imagesWidth | 920px |

Polyfill

For IE = 10, need dataset polyfill. Check out Moderndize Wiki page