scrollbar-slider

scrollbar-slider is a customizable React component that provides carousel functionality with a scrollbar to quickly navigate between slides. This npm library is designed to enhance your web applications with a sleek and user-friendly slider feature.

Installation

To install scrollbar-slider, you can use npm:

  npm install scrollbar-slider

User Guide

ScrollBar props

| Prop name | Type | Description | Default | | :-------- | :------- | :------------------------- | :------- | | slides | array[</>] | Required. An array of slides to be displayed in the carousel. | - | | resize | boolean | (Optional). A boolean indicating whether the carousel should have resizing capability.| false | | direction | string | (Optional). The direction of resizing the carousel. Possible values are "ltr" (left to right) or "rtl" (right to left). | "ltr" | | width | number | (Optional). The width of the carousel in rem. | 10 | | height | number | (Optional). The height of the carousel in rem. | 10 | | backgroundColor | string | (Optional). The background color of the carousel. | "gray" | | cardWidth | number | (Optional). The width of each slide card in rem. | 5 | | spaceBetween | number | (Optional). The space between each slide card in rem. | 1 |

Example

To use scrollbar-slider in your React application, import it as follows:

import ScrollbarSlider from 'scrollbar-slider';

function MyComponent() {
  var slides = [];
  for(var i = 0; i < 10; i++){
    slides.push(<div key={i}  
      style={{ 
        color: 'greenyellow', 
        fontSize: '32px',
        fontFamily: 'fantasy',
        borderRadius: '10px', 
        lineHeight: '18rem',
      }}
    >
        slide {i}
    </div>);
  }

  return (
    <div>
      <ScrollbarSlider 
        slides={slides} 
        resize={true} 
        direction="ltr" 
        width={20} 
        height={20.5} 
        backgroundColor="white" 
        cardWidth={25} 
        spaceBetween={1} 
      />
    </div>
  )
}

export default MyComponent;

Features

• Horizontal Scrollbar
• Mousewheel Scrolling
• Left and right Thumbs to switch slide

License

This project is licensed under the MIT License

Acknowledgements

Special thanks to Sunil for their contributions to this project.

🔗 Links