First transition is not animated for 2 slides

[vi-nastya]

Describe the bug First transition is not animated for the case of 2 slides, 1 item per row and not infinite slider.

To Reproduce

1. Go to https://brainhubeu.github.io/react-carousel/docs/examples/multipleItems
2. Without touching the slider, paste this code in the live JSX editor:

<Carousel
  slidesPerPage={1}
  arrows
>
  <img src={imageOne} />
  <img src={imageTwo} />
</Carousel>

3. In the updated slider, click on the right arrow
4. no animation happens
5. subsequent slide transitions are animated

Expected behavior First slider transition should be animated.

Environment

• Chrome, OS X

Additional context Upon DOM inspection, it seems that

lacks transition-duration CSS style before clicking on the arrow for the first time.. Manually adding to the DOM it "fixes" the problem.

[piotr-s-brainhub]

@vi-nastya

Thanks for reporting this. I guess we haven't noticed this before because almost nobody uses a carousel with only 2 slides. However, IMO it's worth to be fixed.

You're welcome to open a PR if you know how to fix this.

[mfaheemakhtar]

Will be happy to take this (and probably some others) issue(s). But looks like there is a v2 released and I don't find the old docs.

[5tausend]

Maybe my solution can help. We use three consecutive carousels and the first element does not contain a transition either, so the animation of element one to two is not executed. My solution that helped us looks like this:

    let x = document.querySelectorAll('.BrainhubCarousel__track ')
    for (let i = 0; i < x.length; i++) {
      x[i].style.transition = '1s'
    }