A fully responsive Slider for displaying multiple items in a single row with smooth animations
npm install @benavente/slider
sh
npm install @benavente/slider
`
`sh
yarn add @benavente/slider
`
$3
`sh
import Slider from "@benavente/slider"
innerContainerStyles={css
}
>
Put your items here!
Each
separate
element
>
will
be
interpeted
as a
separate
scrollable
item
`
Result:
!ezgif com-video-to-gif (1)
$3
| Prop | Description | Usage Example |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- |
| id | Adds an id to the most outer div of the slider | |
| threshold | Default: 0.5; Between 0 and 1 indicating the percentage that should be visible to be counted as visible in the slider. | |
| spacing | Adds a margin between the elements | |
| buttonLeft | A custom button element to display instead of the default buttons | |
| buttonRight | A custom button element to display instead of the default buttons | |
| time | (in ms) Time of the slide animation | |
| width | Sets the width of the slider without considering buttons | |
| outerContainerStyles | Styles for the outer container of the slider | backgroundColor: red;}>{items} |
| innerContainerStyles | Styles for the inner container of the slider (items container) | backgroundColor: red;}>{items} |
| buttonLeftStyles | Styles for the left button | width: 100px;}>{items} |
| buttonRightStyles | Styles for the left button | width: 100px;}>{items} |
| disableScrollbar | True -> scrollbar won't show up and Slider will only be usable via buttons. Default: false | {items} |
| showButtons | True -> Buttons will be visible. Default: true | {items} |
| disappearingButtons | By default, buttons only show up when hovering over slider. By setting this to false, buttons will be statically visible | {items} ` |
$3