@benavente/slider

Slider

A React package for creating a ready to use and fully customizable slider for your items.

It uses emotion/css for styling so it'll be installed as part of the package.

Installation

npm install @benavente/slider

yarn add @benavente/slider

Usage

import Slider from "@benavente/slider"

 <Slider
      innerContainerStyles={css`
        & div {
          display: inline-block;
          width: 210px;
          height: 210px;
          border: 1px solid black;
          text-align: center;
          line-height: 200px;
        }
      `}
    >
      <div> Put your items here! </div>
      <div> Each </div>
      <div> separate </div>
      <div> element </div>
      <div> </> </div>
      <div> will </div>
      <div> be </div>
      <div> interpeted </div>
      <div> as a </div>
      <div> separate </div>
      <div> scrollable </div>
      <div> item </div>
    </Slider>

Result:

Props

Prop	Description	Usage Example
id	Adds an id to the most outer div of the slider	<Slider id="my-id">{items}<Slider/>
threshold	Default: 0.5; Between 0 and 1 indicating the percentage that should be visible to be counted as visible in the slider.	<Slider threshold={0.85}>{items}<Slider/>
spacing	Adds a margin between the elements	<Slider spacing="10vw">{items}<Slider/>
buttonLeft	A custom button element to display instead of the default buttons	<Slider buttonLeft={<MyButton />}">{items}<Slider/>
buttonRight	A custom button element to display instead of the default buttons	<Slider buttonRight={<MyButton />}">{items}<Slider/>
time	(in ms) Time of the slide animation	<Slider time={250}>{items}<Slider/>
width	Sets the width of the slider without considering buttons	<Slider width="1200px">{items}<Slider/>
outerContainerStyles	Styles for the outer container of the slider	<Slider outerContainerStyles={css` backgroundColor: red;`}>{items}<Slider/>
innerContainerStyles	Styles for the inner container of the slider (items container)	<Slider innerContainerStyles={css` backgroundColor: red;`}>{items}<Slider/>
buttonLeftStyles	Styles for the left button	<Slider buttonLeftStyles={css` width: 100px;`}>{items}<Slider/>
buttonRightStyles	Styles for the left button	<Slider buttonRightStyles={css` width: 100px;`}>{items}<Slider/>
disableScrollbar	True -> scrollbar won't show up and Slider will only be usable via buttons. Default: false	<Slider disableScrollbar={true}>{items}<Slider/>
showButtons	True -> Buttons will be visible. Default: true	<Slider showButtons={false}>{items}<Slider/>
disappearingButtons	By default, buttons only show up when hovering over slider. By setting this to false, buttons will be statically visible	<Slider disappearingButtons={false}>{items}<Slider/>

License: MIT