Infinite logo slider

Installation

Install with npm

  npm install react-infinite-logo-slider

Usage/Examples

import Slider from 'react-infinite-logo-slider'

const Component = () => {
    
    return (
        <Slider
            width="250px"
            duration={40}
            pauseOnHover={true}
            blurBorders={false}
            blurBorderColor={'#fff'}
        >
            <Slider.Slide>
                <img src="/slider/any.png" alt="any" className='w-36' />
            </Slider.Slide>
            <Slider.Slide>
                <img src="/slider/any2.png" alt="any2" className='w-36' />
            </Slider.Slide>
            <Slider.Slide>
                <img src="/slider/any3.png" alt="any3" className='w-36' />
            </Slider.Slide>
            <Slider.Slide>
                <div>
                    Other component...
                </div>
            </Slider.Slide>
        </Slider>
    )
}              
                     
export default Component

Slider props

  <Slider
    width="200px"
    duration={40}
    toRight={false}
    pauseOnHover={false}
    blurBorders={false}
    blurBorderColor={'#fff'}
  >
    ...
  </Slider>

| Prop | Type | Default | Description | | :-------- | :------- | :------- | :-------------------------------- | | width | string | 200px | Required - Width of the ITEM | | duration | number | 40 | The speed with which it moves (in seconds) | | toRight | boolean | false | It moves in the right direction | | pauseOnHover | boolean | false | The animation pauses on hover | | blurBorders | boolean | false | A blur effect will appear at the ends of the slider | | blurBorderColor | string | #fff | Color of blur |

Slide props

  <Slider.Slide
    id="sliderId"
    key="any_key"
    className="awesome_classname ...",
    ...
  >
    ...
  </Slider.Slide>

| Prop | Type | Description | | :-------- | :------- | :-------------------------------- | | props | any | You can pass any props to this. |