-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #100 from erichbehrens/chore/release
Release 2.0.0
- Loading branch information
Showing
3 changed files
with
71 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,14 +6,16 @@ | |
| [](https://circleci.com/gh/erichbehrens/react-animated-slider/tree/master) | ||
| [](https://david-dm.org/erichbehrens/react-animated-slider) | ||
| [](https://david-dm.org/erichbehrens/react-animated-slider?type=dev) | ||
| [](https://bundlephobia.com/result?p=react-animated-slider) | ||
| [](https://bundlephobia.com/result?p=react-animated-slider) | ||
|
|
||
| A Slider/Carousel component for React supporting custom css animations. | ||
|
|
||
| [Demo](https://erichbehrens.github.io/react-animated-slider/) - [Codesandbox Playground](https://codesandbox.io/s/p582xl40j) | ||
| [Demo](https://erichbehrens.github.io/react-animated-slider/) - [Codesandbox Playground](https://codesandbox.io/s/react-animated-slider-q8rdo) | ||
|
|
||
|  | ||
|
|
||
| ## Features: | ||
| ## Features | ||
|
|
||
| - Ready to use slider component with animations | ||
| - Easy customization | ||
|
|
@@ -27,71 +29,51 @@ A Slider/Carousel component for React supporting custom css animations. | |
| - Works with SSR | ||
| - Works on IE11 | ||
|
|
||
| ## Install: | ||
| ## Install | ||
|
|
||
| ```sh | ||
| npm install react-animated-slider | ||
| ``` | ||
| npm install react-animated-slider --save | ||
|
|
||
| **Note**: this component relies on `getDerivedStateFromProps` and requires `[email protected]` or newer. For older react versions please install `react-animated-slider` version 1: | ||
|
|
||
| ```sh | ||
| npm install react-animated-slider@^1 | ||
| ``` | ||
|
|
||
| ## Most Simple Use: | ||
| ## Most Simple Use | ||
|
|
||
| ```jsx | ||
| import Slider from 'react-animated-slider'; | ||
| import 'react-animated-slider/build/horizontal.css'; | ||
|
|
||
| const slides = [ | ||
| { title: 'First item', description: 'Lorem ipsum'} | ||
| { title: 'Second item', description: 'Lorem ipsum'} | ||
| ]; | ||
|
|
||
| <Slider> | ||
| {content.map((article, index) => <div key={index}> | ||
| <h2>{article.title}</h2> | ||
| <div>{article.description}</div> | ||
| {slides.map((slide, index) => <div key={index}> | ||
| <h2>{slide.title}</h2> | ||
| <div>{slide.description}</div> | ||
| </div>)} | ||
| </Slider> | ||
| ``` | ||
|
|
||
| ## Properties: | ||
|
|
||
| **slideIndex** - `number`, default `0` | ||
|
|
||
| Index of the slide that will be initially displayed. | ||
|
|
||
| **duration** - `number`, default `2000`(ms) | ||
|
|
||
| Duration of the animation in milliseconds. It is used to remove the `animateIn` and `animateOut` classNames and assign `current` after the transition has completed. | ||
|
|
||
| **disabled** - `boolean`, default `false` | ||
|
|
||
| Disable slider navigation | ||
|
|
||
| **infinite** - `boolean`, default `true` | ||
|
|
||
| Enable or disable infinite loop through slides. Sliders with only 2 children will have this option set to `false` | ||
|
|
||
| **autoplay** - `number`, default `undefined` | ||
|
|
||
| Autoplay interval in miliseconds. If `undefined` the slider will not play automatically. The timer will be paused and reset during user interactions such as mouse over or touch, to avoid sliding away the elements when the user wants to click them. | ||
|
|
||
| **touchDisabled** `boolean`, default `false` | ||
|
|
||
| Disable slider navigation through touch events | ||
|
|
||
| **minSwipeOffset** - `number`, default `15`(px) | ||
|
|
||
| Minimum distance to swipe for triggering a navigation event | ||
|
|
||
| **previousButton** - `ReactElement`, default is an arrow svg | ||
|
|
||
| Will be rendered inside the previous button | ||
|
|
||
| **nextButton** - `ReactElement`, default is an arrow svg | ||
|
|
||
| Will be rendered inside the next button | ||
|
|
||
| **onSlideChange** - `function`, called after the current slide has changed; receives an object with the new slide index as argument: | ||
|
|
||
| ```js | ||
| <Slider onSlideChange={event => console.log(event.slideIndex)}> | ||
| ``` | ||
|
|
||
| **classNames** `object`, default | ||
| ## Properties | ||
|
|
||
| | property | type | default | description | | ||
| |-|-|-|-|-| | ||
| | **slideIndex** | `number` | `0` | Index of the slide that will be initially displayed. | | ||
| | **duration** | `number` | `2000`(ms) | Duration of the animation in milliseconds. It is used to remove the `animateIn` and `animateOut` classNames and assign `current` after the transition has completed. | | ||
| | **disabled** | `boolean` | `false` | Disable slider navigation | | ||
| | **infinite** | `boolean` | `true` | Enable or disable infinite loop through slides. Sliders with only 2 children will have this option set to `false` | | ||
| | **autoplay** | `number` | `undefined` | Autoplay interval in miliseconds. If `undefined` the slider will not play automatically. The timer will be paused and reset during user interactions such as mouse over or touch, to avoid sliding away the elements when the user wants to click them. | | ||
| | **touchDisabled** | `boolean` | `false` | Disable slider navigation through touch events | | ||
| | **minSwipeOffset** | `number` | `15`(px) | Minimum distance in pixels to swipe for triggering a navigation event | | ||
| | **previousButton** | `ReactElement` | arrow svg | Will be rendered inside the previous button | | ||
| | **nextButton** | `ReactElement` | arrow svg | Will be rendered inside the next button | | ||
| | **classNames** | `object` | _see below_ | Object representing the CSS classNames that will be apllied to the slides. | | ||
|
|
||
| ```js | ||
| { | ||
|
|
@@ -110,28 +92,24 @@ Will be rendered inside the next button | |
| } | ||
| ``` | ||
|
|
||
| Object representing the CSS classNames that will be apllied to the slides. | ||
|
|
||
| ### Classnames | ||
|
|
||
| **slider** the classname for the whole Slider element | ||
|
|
||
| **previousButton** previous button | ||
|
|
||
| **nextButton** next button | ||
|
|
||
| **buttonDisabled** disabled state for previous and next button | ||
|
|
||
| **track** element wrapping all slides | ||
|
|
||
| **slide** apllied to every item (child) | ||
|
|
||
| **hidden** a slide that is not visible and is not adjacent to the current slide, therefore no animation will be usually needed | ||
|
|
||
| **previous** the slide that will appear or is appearing when the slider navigated back | ||
|
|
||
| **next** the slide that will appear or is appearing when the slider navigated forward | ||
|
|
||
| **animateIn** the slide moving into the view | ||
|
|
||
| **animateOut** the slide moving out of the view | ||
| | class | description | | ||
| |-|-| | ||
| | **slider** | element wrapping the whole Slider | | ||
| | **previousButton** | previous button | | ||
| | **nextButton** | next button | | ||
| | **buttonDisabled** | disabled state for previous and next button | | ||
| | **track** | element wrapping all slides | | ||
| | **slide** | apllied to every child item | | ||
| | **hidden** | a slide that is not visible and is not adjacent to the current slide, therefore no animation will be applied | | ||
| | **previous** | the slide that will appear or is appearing when the slider navigated back | | ||
| | **next** | the slide that will appear or is appearing when the slider navigated forward | | ||
| | **animateIn** | the slide moving into the view | | ||
| | **animateOut** | the slide moving out of the view | | ||
|
|
||
| ## Events | ||
|
|
||
| | property | description | | ||
| |-|-| | ||
| | **onSlideChange** | called after a slide change animation has ended. Receives an object with the new slide index as argument: <br > `<Slider onSlideChange={event => console.log(event.slideIndex)}>` | | ||
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters