erichbehrens / react-animated-slider

Animated slider/carousel component for react

react-animated-slider

A Slider/Carousel component for React supporting custom css animations.

Demo - Codesandbox Playground

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

npm install react-animated-slider

Note: this component relies on getDerivedStateFromProps and requires [email protected] or newer. For older react versions please install react-animated-slider version 1:

npm install react-animated-slider@^1

Most Simple Use

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>
  {slides.map((slide, index) => <div key={index}>
    <h2>{slide.title}</h2>
    <div>{slide.description}</div>
  </div>)}
</Slider>

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.

{
  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: <Slider onSlideChange={event => console.log(event.slideIndex)}>

react-animated-slider's Issues

An in-range update of babel7 is breaking the build 🚨

There have been updates to the babel7 monorepo:

• • The devDependency @babel/cli was updated from 7.1.2 to 7.1.5.

• The devDependency @babel/core was updated from 7.1.2 to 7.1.5.
• The devDependency @babel/preset-env was updated from 7.1.0 to 7.1.5.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

CSS - ClassNames

Is there a way to assign my own defined classnames. I am using the slider in many components (vert & hor). And the vert / horz css styling is clashing with each other.

Handle any number of children

• 1 child: disable slider
• 2 children: disable infinite slider OR next and previous className must be set to the hidden element, depending on the animation direction
• 3+ children: normal behavior

Touch events improvements

• make it optional
• implement vertical swipe

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Release Notes for v4.36.0

Features

• SourceMapDevToolPlugin append option now supports the default placeholders in addition to [url]
• Arrays in resolve and parser options (Rule and Loader API) support backreferences with "..." when overriding options.

Commits

The new version differs by 42 commits.

• 95d21bb 4.36.0
• aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
• b3ec775 improve merging of resolve and parsing options
• 53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
• ab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
• 0bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
• f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc
• 31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
• 036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
• 37d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
• ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
• 0beeb7e Merge pull request #9391 from vankop/create-hash-typescript
• bf1a24a #9391 resolve super call discussion
• bd7d95b #9391 resolve discussions, AbstractMethodError
• 4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2

There are 42 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Slide With new data evertime

when i populate the content array it starts the slider but i want to populate the data again and again with new data everytime how can i do that ?

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from 4.24.0 to 4.25.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Release Notes for v4.25.0

Features

• add format option to DllPlugin to allow generating formated manifest json
• add flags to ProgressPlugin to add and remove information
  • entrypoint counter was added, but disabled by default to avoid breaking change

Bugfixes

• fix code generation for context dependencies when replacing compile-time constant expressions
• disable the effect of the ProvidePlugin for .mjs

Commits

The new version differs by 38 commits.

• 290094e 4.25.0
• 355590e Merge pull request #8250 from Aladdin-ADD/patch-3
• 0293c3a Merge pull request #8279 from smelukov/support-entry-progress
• 1ea411b Merge pull request #8139 from NaviMarella/FormatManifest
• 4b72635 exclude watch test cases
• e35d084 increase test timeout
• 6be1411 move schema into definitions
• 3d74504 add missing hooks to progress
• 56d8a8f prevent writing the same message multiple times to stderr
• 64e3826 use flags to show different parts of the progress message
• 8c5e74f Merge branch 'master' into support-entry-progress
• 10ff7a5 Merge pull request #8327 from DavidStaheli/users/davidstaheli/publish-test-results
• 1b23c1e Publish test results from Azure Pipelines builds
• eb68316 Merge pull request #8294 from ljqx/zhbliu/import-parser-plugin-fix-context-return
• 22aee1e fix shortcut condition

There are 38 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Infinite slide does not work if there only 2 items

This can be reproduced on the demo Codesandbox Playground as well, if the items are reduced to 2, the slide does not go back to the first item once all are rotated.

Mapping Array From State Breaks Code

Again, I'm loving the plugin a lot and I appreciate you sharing it.

While I can get the slider to work with a hard coded array (like in the example), it seems to stop working when I map an array that has been populated by an external API in state. The array has all of the necessary objects, and it shows that they are there on dev tools, but the slider won't move on to the next slide automatically or manually (by clicking arrows).

I'm going to keep working on it and see what I can find, but if you have any ideas then please let me know. Cheers!

Duration

When you set a manual duration using the duration property it breaks the sliding transition animation. The transition animation is set in the CSS at 2s hardcoded, so when you set your duration to anything less than that (ex. duration={1000}), it animates half way and then jumps the rest of the way.

Typescript definitions

goTo function

Is it possible to get any (live, if it's feasible) examples of how the goTo function works? There was a dots functionality added a while back, and I'd like to see how you could implement the goTo function to make them clickable.

Accessing state

Hello,

First off thank you for an amazing component. This isn't an issue so I apologize if I am posting it here. I need to access the state of currentslide index on the page i am rendering the Slider. Any idea how can i access it?

My Banner is sliding diagonally even when included css file is 'horizontal' and direction="horizontal'. How to fix this?

How to hide the prev and next button when there is only one slide?

I realize that this component is a slider which means multiple images. But at the moment I only have one. Can I hide the navigation buttons in this case?

Button Disappears When Wrapped In Link

Hi!

First of all, I am loving your slider component and I really appreciate your time and kindness in sharing it to the world.

I couldn't find a way to contact you directly, but I was having an issue getting the buttons to work. The normal method of wrapping it with a or tag causes it to disappear. This is only an issue when the component is being mapped dynamically. If you know what the issue is and can maybe point me in the right direction on getting buttons to actually work and redirect to a dynamic link, I'd really appreciate it.

Thanks again for your time and expertise.

Owen.

Werid Error during multiple usage of Slider

I am using the slider component in various parts of my site, in some cases multiple times on one page and keep getting this error that i cant's seem to figure out.

Definitely want to avoid this for production. This error occurs after i've changed the route and navigated to a different page.

Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

There's no possible to custom the arrows

Hi there! I need to custom the arrows to use in my template.
I'd like to replace the jQuery slideshow effect to this animated slider.

In my template the arrows are out of the slider div. This gives me customization in the layout.
More information about the slideshow in my template:
http://prototype-learn.webflow.io/

How to change next and prev button

hey, how to change color next button and prev button or remove and add an svg image without using default SVG.

thanks.

Slide with tab key, is it possible?

Suppose I have a slider with multiple 'cards'. Each card has input fields, tag. Is there a way to slide with tab key, if I defined tabindex for individual field? For example if I select last input field with a tab key, and press it again, will slider change on the next 'page'. If possible also with infinitive slider.

Sorry for my English.

An in-range update of css-loader is breaking the build 🚨

The devDependency css-loader was updated from 1.0.0 to 1.0.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

css-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Release Notes for v1.0.1

1.0.1 (2018-10-29)

Bug Fixes

• loader: trim unquoted import urls (#783) (21fcddf)

Commits

The new version differs by 4 commits.

• 10c3bc3 chore(release): 1.0.1
• e6cb60e chore(package): switch from lodash.camelcase to lodash (dependencies) (#784)
• 21fcddf fix(loader): trim unquoted import urls (#783)
• 67b2f20 docs(readme): fix various typos (#782)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Dummy question

Hello, is a dummy question but... where can i put the properties and configure them? thanks buddy!

An in-range update of eslint-plugin-import is breaking the build 🚨

The devDependency eslint-plugin-import was updated from 2.16.0 to 2.17.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Commits

The new version differs by 61 commits.

• 0499050 bump to v2.17.0
• f479635 [webpack] v0.11.1
• 8a4226d Merge pull request #1320 from bradzacher/export-ts-namespaces
• 988e12b fix(export): Support typescript namespaces
• 70c3679 [docs] make rule names consistent
• 6ab25ea [Tests] skip a TS test in eslint < 4
• 405900e [Tests] fix tests from #1319
• 2098797 [fix] export: false positives for typescript type + value export
• 70a59fe [fix] Fix overwriting of dynamic import() CallExpression
• e4850df [ExportMap] fix condition for checking if block comment
• 918567d [fix] namespace: add check for null ExportMap
• 2d21c4c Merge pull request #1297 from echenley/ech/fix-isBuiltIn-local-aliases
• 0ff1c83 [dev deps] lock typescript to ~, since it doesn’t follow semver
• 40bf40a [*] [deps] update resolve
• 28dd614 Merge pull request #1304 from bradennapier/feature/typescript-export-type

There are 61 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: t

Could you update to fix this warning? Thank you!

CSS Styling

CSS Styling not applying on Slider and children elements.

Autoplay feature

how to impliment dots point in this slider

it is possible to full scrren slider?

hi
I'm using this library
is this possible to full screen width in page?

how to change the size of the div slicer

hi im using your carrusel for a school project and i need to change the size of the slider but it wont let me. i was wondering if you can help me with this
thank you

Horizontal slider

Hi!

Thanks for this component! However, I am having trouble as the animates as vertical. Like in here: https://codesandbox.io/s/p582xl40j

Both components have same effects.

An in-range update of highlight.js is breaking the build 🚨

The devDependency highlight.js was updated from 9.14.2 to 9.15.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

highlight.js is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Updating the Slide Index dynamically doesn't work

Hi,
I am loving how simple yet efficient this slider is, thank you!
I am however struggling to update the default slide dynamically with the route name (or a prop passed in route), it seems the Slider doesn't get re rendered with the rest of the page. I am using Hooks, and the latest (18.1) version of React

I have tried

• using a prop to fill the value of SlideIndex
• using use/setState to return a different number that I call on the SlideIndex Prop,
• using use/setState to return to return the whole component with a different SlideIndex Prop
• have the slider as an external component and a nested component.
• forceUpdate

None of it made any difference (and updating the Props should, to my understanding, have caused a component rerender).

It does work when navigating away to a page with a different component, and then back to a page using the slider Component. Data also updates when displaying text on the page, so the page is refreshing properly.

Nothing seems to work, which leads me to thing the Slider gets created once and doesn't rerender.

Is there a way I could force the instance to recreate, or use a function to set the Slide Index?

Thank you,
Deborah

slides stop when hovered on them

@erichbehrens i want to know if there is a way to remove the functionality in which the slider stops moving when there is a mouse hover on it. need the answer urgently, btw great tool really loving it thanks

Render content between buttons

I would like to have the buttons completely to the left and right of the content instead of overlaid on them.

Essentially a row like:

<div style={ { display: 'flex', flex-direction: 'row' } }>
  <LeftArrow/> // width: 10%
  <Slide/> // width: 80%
  <RightArrow/> // width: 10%
</div>

I've been playing around a bit in the chrome console but I'm have a very hard time achieving this!
It looks like the div.track maybe needs to be between the a elements that are the arrows, but without this ordering I can't figure it out. Help!

Bad experience on mobile devices

Hey there! Let me start by congratulating you for this package. It's simple and every slide is customizable and great. But I see really poor for mobile. It can't swap to left or right with ease. I can't scroll up or down the page either.

Infinite and AutoPlay does not work with 2 slides

I see that there is an exact same issue #80 but is closed, when it is pretty much reproducible.

change slide? (or controlled behaviour)?

Hi! is it possible to make the slider chnage to next item via a controlled behaviour?
I mapped slideIndex to the state but it wont work... Basically I want to add a nextSlide feature to the button...

Thanks!

An in-range update of eslint-plugin-import is breaking the build 🚨

The devDependency eslint-plugin-import was updated from 2.18.2 to 2.19.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Commits

The new version differs by 46 commits.

• 9b76635 Bump to v2.19.0
• 47a232e [resolvers/webpack] v0.12.0
• 26ad476 [resolvers/webpack] [deps] update debug, enhanced-resolve, has, interpret, lodash, resolve, semver
• 3f0e8f3 [resolvers/node] [Deps] update resolve
• 7190c3e bump utils to v2.5.0
• a60e5c6 [New] no-commonjs: add allowConditionalRequire option
• 414c923 [New] enable passing cwd as an option to eslint-import-resolver-webpack
• 8224e51 [New] order/no-extraneous-dependencies: Alphabetize imports within groups
• f12ae59 [New] no-duplicates: add a considerQueryString option to handle false positives when using some webpack loaders.
• 2d3d045 [fix] importType: Accept '@example' as internal
• 0426f16 [New] order: add pathGroups option to add support to order by paths
• 99b3fbf [Fix] no-extraneous-dependencies: Add support for export from
• 21bf8c6 [Fix] no-cycle: should not warn for Flow imports
• 0cd5e43 [Fix] no-unused-modules: fix crash due to export *
• 05085bb [flow] no-unused-modules: add flow type support

There are 46 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Hi , how about of the Dot feature?

awesome component.
just missing a Dots feature, or it’s really perfect.

question about the Screen Recorder

How to call the camera in a non-https website or a chrome extension ,like your Screen Recorder , May I get this source code ? THS ！

dots impliment

Update vertical css example

• use top instead of translate

Previous/Next buttons are broken and trying to replace those ones.

I found previous/next buttons are broken due to the link in the demo, so I tried to replace those buttons from the images located in "public" directory in my development env. However, when I tried to like the below, it occurs an error.

.previousButton,
.nextButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: url("%PUBLIC_URL%/assets/icons/arrow_back.svg") no-repeat center center /
/*   background: url("/public/assets/icons/arrow_back.svg") no-repeat center center /  not working as well  */
    16px;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  cursor: pointer;
}

.previousButton:hover,
.nextButton:hover {
  background: url("%PUBLIC_URL%/assets/icons/arrow_back.svg") no-repeat center center /
    16px;
}

Could you let me know how to deal with this?

Cleanup

• console.logs
• formatting and code style
• unused vars

Duration change is not reflected in animation.

As far as I know, default duration is 2000.
When I change duration to 1000, animation speed still acts like duration is 2000 so that it prevents smooth animation.

Need more event listeners.

First, thank you for great slider!

I think it would be better if there are more event listeners such as onClickPrevBtn, onClickNextBtn, or
onBeforeSlideChange.

Currently, there's only one event listener onSlideChange which called after slide has changed. I need something called before change.

An image slide in slider

Hello

I am Trying your package for creating a slider for a website but that time I am facing an issue like this:
In slider when I am passing background image that time on run time only the first content image is displayed for all slides. The other is not changed, only contents are changed.
So pls tell me what to do .....
Looking forward to a response

Ability to dynamically toggle the "disabled" prop

Howdy,

I'm attempting to use this great component for a project, but one thing that I haven't been able to figure out is a way to dynamically toggle the "disabled" prop. My use case is this... every "slide" contains a question, which I would like to have "required" before the user can move to the next slide. I've attempted passing a function to the disabled prop, but it appears that only accepts a boolean value. Anyone know of a possible work around for this?

Thanks!

Dots feature

An in-range update of react is breaking the build 🚨

There have been updates to the react monorepo:

• • The dependency react was updated from 16.6.0 to 16.6.1.

• The devDependency react-dom was updated from 16.6.0 to 16.6.1.
• The devDependency react-test-renderer was updated from 16.6.0 to 16.6.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Release Notes for v16.6.1

16.6.1 (November 6, 2018)

React DOM

• Fallback should not remount every time a promise resolves. (@acdlite in #14083)
• Fix bug where Suspense keeps showing fallback even after everything finishes loading. (@acdlite in #14083)
• Fix unresolved default props in lifecycle methods of a lazy component. (@gaearon in #14112)
• Fix bug when recovering from an error thrown during complete phase. (@gaearon in #14104)

Scheduler (Experimental)

• Switch from deadline object to shouldYield API. (@acdlite in #14025)

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴