@benavente/slider NPM

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.

React badge

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:

ezgif com-video-to-gif (1)

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/>`