react-responsive-carousel: `animationHandler` prop not working?

Hey guys, for me doesn’t work just using the import like this.

import Carousel from 'react-responsive-carousel/lib/js/components/Carousel/index'

The carousel worked, but it didn’t show anything on the screen, so I found out that the z-index of the lists were all like -2. So it was easy to fix by forcing the style setting:

carousel:{ '& li':{ zIndex: '1 !important' } },

I hope this is good for someone else who’s come up with the same problem as me.

We discovered this repo for this annoying issue. Currently the structure of lib/carousel is broken.

When importing carousel component replace this: import { Carousel } from "react-responsive-carousel";

with this: import Carousel from "react-responsive-carousel/lib/js/components/Carousel/index";

please fix in future release 👍 thank you

I’m having the same issue. Is there any update? The animationHandler prop isn’t even listed in the available props section.

import Carousel from “react-responsive-carousel/lib/js/components/Carousel/index”;

Thank you, changing the import path works as expected.

It looks like the story doesn’t work as expected: http://react-responsive-carousel.js.org/storybook/?path=/story/01-basic--fade Could this be a regression?

Workaround not working with typescript.

On my side changing the path was also not working, so I found another possible solution, the onChange method will be triggered every time the index changes, so, every time the index changes I add a class to the whole div that has a fade-out effect, and reset it.

`export default function CarouselComponent(props) {

let [transition, setTransition ] = useState('width-carousel')

const handleTransition= ()=>{
    setTransition('width-carousel fade-in-image')

    setTimeout(()=>{
        setTransition('width-carousel')
    }, 2000)
}


    return (


        <Carousel
            autoPlay={true}
            showArrows={false}
            showStatus={false}
            showThumbs={false}
            infiniteLoop={true}
            onChange={handleTransition}
        >

            {
                props.array.map((one, index) => (
                    <div className={transition} key={index}>
                        <img src={one.img} className={"registration_image"}/>
                        <div style={{maxWidth: '400px'}}>
                            <h3 className={'carousel-header'}>{one.header}</h3>
                            <p>{one.text}</p>
                        </div>
                    </div>
                ))
            }

        </Carousel>


    );

};`

`.fade-out-image { animation: fadeOut 3s; -webkit-animation: fadeOut 3s; -moz-animation: fadeOut 3s; -o-animation: fadeOut 3s; -ms-animation: fadeOut 3s; } @keyframes fadeOut { 0% {opacity:0;} 100% {opacity:1;} }

@-moz-keyframes fadeOut { 0% {opacity:0;} 100% {opacity:1;} }

@-webkit-keyframes fadeOut { 0% {opacity:0;} 100% {opacity:1;} }

@-o-keyframes fadeOut { 0% {opacity:0;} 100% {opacity:1;} }

@-ms-keyframes fadeOut { 0% {opacity:0;} 100% {opacity:1;} }`

Any update on this?

Any fix to this fading issue?