animated Slide change with currentSlide property.

i would like autoplay to work while preserving the animation while changing slides in componentDidMount.

i was able to achieve autoplay with mentioned answers in #46. but doing so i would like to have the animation of onClick Dot component.

is there a way to achieve this?

class Comp extends Component {
  constructor() {
        super();
        this.state = {
            totalSlides: 3,
            currentSlide: 0
        };
  }
  
  componentDidMount() {
        setInterval(() => {
            let currentSlide = this.state.currentSlide + 1;
            if (currentSlide === 3) currentSlide = 0
            this.setState({ currentSlide });
        }, 3000);
  }

  render() {
      return (
                <CarouselProvider
                    naturalSlideHeight={0.5}
                    naturalSlideWidth={1}
                    totalSlides={this.state.totalSlides}
                    currentSlide={this.state.currentSlide}
                    id="home"
                >
                    <Slider>
                        <Slide index={0}  >SOME CONTENT</Slide>
                        <Slide index={1}  >SOME CONTENT</Slide>
                        <Slide index={2}  >SOME CONTENT</Slide>
                    </Slider>
                    <DotGroup  />
                </CarouselProvider>
        );
    }
}

[mrbinky3000]

Well, maybe it’s not a bug. When you update the currentSlide property on the CarouselProvider, it just jumps to the slide. When you update the currentSlide property in the carousel’s store, it animates. I think I did this so that, when the component is mounted, it will just START at currentSlide. Otherwise, if you wanted to start in the middle of a bunch of slides, it would animate when the component is first mounted. I don’t think that’s a desirable option.

The solution is to make a component, wrap it with the WithStore higher order component, add the timer there, and have the timer call setStoreState({ currentSlide: x }). This new component should live as a child of CarouselProvider. I will create a demo and add it to the project. Maybe I’ll just make it a new component, StartButton

[camel113]

No I think he is asking why when you change the currentSlide programmatically, the transition effect is not the same as when you click on dots to change slides.