alvin-react-image-show

React image slide show, support fixed or dynamic images height

Usage no npm install needed!

<script type="module">
  import alvinReactImageShow from 'https://cdn.skypack.dev/alvin-react-image-show';
</script>

README

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