Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-lalit-slider

lalit-sekhar9MIT1.0.4TypeScript support: included

A React package for Slider

react, react component, scroll, slider, react-lalit-component, react-lalit-slider, auto slider, lalit sekhar behera, scroll, auto scroll, horizontal scroll, banner slider, lalit, lalit-sekhar, lalitsekahr, lalitsekahrbehera

readme

Slider ![NPM Version][npm-image]

A React package for Slider

How to use it?

code formate as follow

import { Slider } from 'react-lalit-slider';

const MyScroll = () => {
  return (
    <div style={{ width: '100%' }}>
      <Slider>
        <>
          <div
            style={{
              backgroundImage: `url(add any url)`,
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center',
              backgroundSize: 'cover',
              height: '38em',
              minWidth: '100%',
            }}
          ></div>
          <div
            style={{
              backgroundImage: `url(add any url)`,
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center',
              backgroundSize: 'cover',
              height: '38em',
              minWidth: '100vw',
            }}
          ></div>
        </>
      </Slider>
    </div>
  );
};

export default MyScroll;

Types of Props and Effects

  • With Arrows And Dots
<Scroll>

//... your elements

</Slider>
  • With Only Arrows
<Scroll Dots={false}>

//... your elements

</Slider>
  • With Only Dots
<Scroll Arrow={false}>

//... your elements

</Slider>
  • With No Dots No Arrow
<Scroll Dots={false} Arrow={false}>

//... your elements

</Slider>
  • With Speed Change

speed value in millisecond

<Scroll Dots={false} Arrow={false} auto={1000}>

//... your elements

</Slider>