react-infinite-image-link-carousel

react-infinite-image-link-carousel

Install

npm install react-infinite-image-link-carousel --save 

Demo

Props

I have kept minimal configurations. Less configurations Less confusions.

• imageList: It should be an array of javascript objects. Each object with image and href properties. 'image' object should contain location, href should contain link to image. Leave black or '#' if you don't want any links
• autoInfiniteSlider: Provide true if you want aut0 slide to happen else false is enough
• infiniteSlideTimeScaleInMs: Provide a timer after which image should move automatically. This is linked with 'autoInfiniteSlider'
• heightOfImage: This is height of image or corousel

Minimum 5 images are required. From which a combination of 3 will be shown at a time. If image list is less than 5, than this package will not work the way it is designed for.

Example

import React from 'react';
import ReactDOM from 'react-dom';
import ReactInfiniteImageLinkCorousal from 'react-infinite-image-link-carousel'

class App extends React.Component {
      constructor(props) {
        super(props)

        // this is the format of imagelist required for this package
        // You need to provide image location, along with
        // the link you want to go to, else you can keep '#'
            
        this.state = {
            imgList: [
                { image: 'imgs/2.jpg', href: '#' },
                { image: 'imgs/5.jpg', href: '#' },
                { image: 'imgs/6.jpg', href: '#' },
                { image: 'imgs/7.jpg', href: '#' },
                { image: 'imgs/8.jpg', href: '#' },
                { image: 'imgs/9.jpg', href: '#' },
                { image: 'imgs/10.jpg', href: '#' }
            ]
        }
    }

    render() {
        return (
            <div>
                <ReactInfiniteImageLinkCorousal 
                    imageList={this.state.imgList}  // Imagelist in the above format is required, rest i'll take care
                    autoInfiniteSlider={false}         // True if you want auto-slide function else false
                    infiniteSlideTimeScaleInMs={5000}     // Mention totals seconda after which slide should happen
                    heightOfImage={'50vh'} />        // Height of images or corousel
            </div>
        )
    }

}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

MIT Licensed