marshall62/react-image-show

Simple React images slide show (carousel)

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
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