0.3.4 • Published 4 years ago

alvin-react-image-show v0.3.4

Weekly downloads
4
License
MIT
Repository
github
Last release
4 years ago

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

PropertyTypeDescriptionDefault
imagesarrayArray of images URLnone
fixedImagesHeightboolEnables fixed images height mode, fit height and then crop width to main aspect ratio, too narrow images will be center and arrow key navigationfalse
infiniteboolEnable infinite scrolling modefalse
indicatorsboolShow indicatorfalse
thumbnailsboolShow thumbnailsfalse
arrowsboolShow arrowstrue
widthstringHorizontal width of the carousel, include arrows, no apply in mobile mode, always 100%920px
imagesWidthstringHorizontal width of the image inside carousel, exclude arrows, always 100% on mobile800px
imagesHeightstringHeight of the images when fixedImagesHeight is set450px
imagesHeightMobilestringHeight of the images on mobile when fixedImagesHeight is set56vw
thumbnailsWidthstringHorizontal width of the thumbnails strip, always 100% on mobile920px
thumbnailsHeightstringHeight of thumbnails strip width of the carousel12vw
onImageClickfunctionImage click callbackundefined
onThumbnailsImageClickfunctionThumbnails Image click callbackundefined
arrowWidthstringHorizontal width of the arrows - you might want to set it to the same amount as imagesWidth920px

Polyfill

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