# dandelion-animated-slider > Animated slider component for react Latest version **1.0.0** (published 2022-11-06) · MIT license · 0 weekly downloads ## Install ```sh npm install dandelion-animated-slider pnpm add dandelion-animated-slider yarn add dandelion-animated-slider bun add dandelion-animated-slider ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2022-11-06 | | First published | 2022-11-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 21.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 280 | | Author | Erich Behrens | | Maintainers | ilhammeidi | | Keywords | react, component, slider, gallery, slideshow, carousel, react-component, react-slider, react-gallery, react-slideshow, react-carousel, image slider, image gallery, animations | ## Links - npm: https://www.npmjs.com/package/dandelion-animated-slider - Repository: https://github.com/erichbehrens/react-animated-slider - Homepage: https://github.com/erichbehrens/react-animated-slider#readme - Issues: https://github.com/erichbehrens/react-animated-slider/issues - npm.io page: https://npm.io/package/dandelion-animated-slider ## Alternatives - [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads - [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads - [better](https://npm.io/package/better.md) — 42 weekly downloads - [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads - [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads ## Recent versions - 1.0.0 (latest) — 2022-11-06 ## README # react-animated-slider [![npm version](https://img.shields.io/npm/v/react-animated-slider.svg)](https://www.npmjs.com/package/react-animated-slider) [![downloads](https://img.shields.io/npm/dt/react-animated-slider.svg)](https://www.npmjs.com/package/react-animated-slider) [![Greenkeeper badge](https://badges.greenkeeper.io/erichbehrens/react-animated-slider.svg)](https://greenkeeper.io/) [![CircleCI](https://circleci.com/gh/erichbehrens/react-animated-slider/tree/master.svg?style=shield)](https://circleci.com/gh/erichbehrens/react-animated-slider/tree/master) [![dependencies](https://david-dm.org/erichbehrens/react-animated-slider.svg)](https://david-dm.org/erichbehrens/react-animated-slider) [![devDependencies](https://david-dm.org/erichbehrens/react-animated-slider/dev-status.svg)](https://david-dm.org/erichbehrens/react-animated-slider?type=dev) [![minified size](https://badgen.net/bundlephobia/min/react-animated-slider)](https://bundlephobia.com/result?p=react-animated-slider) [![minified + gzipped size](https://badgen.net/bundlephobia/minzip/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/react-animated-slider-q8rdo) ![Preview](https://res.cloudinary.com/riangle/image/upload/v1511700118/react-animated-slider_qqedfm.png) ## Features - Ready to use slider component with animations - Easy customization - Horizontal or vertical navigation - Swipe navigation on touch devices - Infinite slider - Autoplay - Supports any element as children - Clean DOM without dirty manipulations - Support for CSS modules - Works with SSR - Works on IE11 ## Install ```sh npm install react-animated-slider ``` **Note**: this component relies on `getDerivedStateFromProps` and requires `react@16.4` or newer. For older react versions please install `react-animated-slider` version 1: ```sh npm install react-animated-slider@^1 ``` ## 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'} ]; {slides.map((slide, index) =>

{slide.title}

{slide.description}
)} ``` ## 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 { slider: 'slider', previousButton: 'previousButton', nextButton: 'nextButton', buttonDisabled: 'disabled', track: 'track', slide: 'slide', hidden: 'hidden', previous: 'previous', current: 'current', next: 'next', animateIn: 'animateIn', animateOut: 'animateOut', } ``` ### Classnames | 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:
` console.log(event.slideIndex)}>` | --- _Source: https://npm.io/package/dandelion-animated-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._