Gallereact is a complete ready to use gallery slider, with a lot of possible customizations. It works based on object-fit for img tags, which allows a better ratio management. Just styling the div that contains the component with a height and a width and the images will fit on that.

npm install gallereact

You might need to to install styled-components as a peer dependency, and you're ready to go!

Check out the live demo here to get an idea on how it works!

Import the component Gallereact from the library and put it inside a container with a declared height and width. This is really important, Gallereact is designed to be completely customizable from the user side, so it will adapt itself perfectly to its container.

import Gallereact from 'gallereact';

function MyComponent () {
  const images = [
    'http://image.url/1', 
    'http://image.url/2', 
    'http://image.url/3'
  ];
                  
  return (
    <div style={{ width: '60vw', height: '80vh' }}>
      <Gallereact images={images} />
    </div>
  )
}

If you don't have any tagline you can pass just the url of the images.

It's possible to pass options and style objects to customize the way you prefer.

<Gallereact
  images={[/* array of images */]} 
  swipe={true}
  displayArrows={false} 
  slideStyle={{
    width:"80%",
    height:"90%",
    margin:"5% 10%",  
    boxShadow:"0 2px 20px -1px #2222"
  }} 
  dotStyle={{
    width:"25px",
    height:"3px",
    borderRadius:0,
    margin:"0px"
  }}  
/>

You can pass a callback function that is going to be trigger every time that the slide changes. It will pass the current index as single parameter.

const [currentSlide, setCurrentSlide] = useState(0)

function onChangeSlide (i) {
  setCurrentSlide(i)
}

return (
  <div style={style.container}>
    <Gallereact 
      images={images} 
      callback={onChangeSlide}
      />
  </div>
)

You can control the slider passing the property inputIndex which will translate to the targeted slider.

const [index, setIndex] = useState(0)

function goToSlide () {
  setIndex(0)
}

return (
    <div style={style.container}>
      <Gallereact 
        images={images} 
        inputIndex={index}
      />
    	<button onClick={goToSlide}> Back to first slide</button>
    </div>
  )

To contribute please read the CONTRIBUTING.md

• Leonardo Di Vittorio - GitHub - LinkedIn

This project is licensed under the MIT License - see the LICENSE.md file for details.