1.1.2 • Published 2 years ago

@benavente/slider v1.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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 install size

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

PropDescriptionUsage Example
idAdds an id to the most outer div of the slider<Slider id="my-id">{items}<Slider/>
thresholdDefault: 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/>
spacingAdds a margin between the elements<Slider spacing="10vw">{items}<Slider/>
buttonLeftA custom button element to display instead of the default buttons<Slider buttonLeft={<MyButton />}">{items}<Slider/>
buttonRightA 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/>
widthSets the width of the slider without considering buttons<Slider width="1200px">{items}<Slider/>
outerContainerStylesStyles for the outer container of the slider<Slider outerContainerStyles={css` backgroundColor: red;`}>{items}<Slider/>
innerContainerStylesStyles for the inner container of the slider (items container)<Slider innerContainerStyles={css` backgroundColor: red;`}>{items}<Slider/>
buttonLeftStylesStyles for the left button<Slider buttonLeftStyles={css` width: 100px;`}>{items}<Slider/>
buttonRightStylesStyles for the left button<Slider buttonRightStyles={css` width: 100px;`}>{items}<Slider/>
disableScrollbarTrue -> scrollbar won't show up and Slider will only be usable via buttons. Default: false<Slider disableScrollbar={true}>{items}<Slider/>
showButtonsTrue -> Buttons will be visible. Default: true<Slider showButtons={false}>{items}<Slider/>
disappearingButtonsBy 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

1.1.1

2 years ago

1.1.0

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.1.2

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago