javascript - Animating a custom carousel with React.js - Stack Overflow

admin管理员组

文章数量:1277896

I created a carousel with React.js, it was simple until I arrived at the animation problem. The carousel is classic, it is posed of "slides" of content, of small bullets indicating the current slide, and of small thumbnails for navigating between the slide.

The carousel ponent is data-driven, meaning that it is passed its content as a javascript array of objects. Each slide is a li tag within a ul, and just have to change the margin-left css property of the ul to move from one slide to another.

I'm wondering if I should use the ReactTransitionGroup or ReactCSSTransitionGroup to animate the transition from one slide to another. Basically the transition is a sliding effect from left to right when going from one slide to another.

My understanding is that the ReactTransitionGroups API is helpful when adding or removing some content. Here I won't add/remove any slide, change changing the visible one with an animation.

My difficulty wrapping my head around this is that I developped a static (aka without animation) carousel where the currently displayed slide is the only state saved in the ponent. This state is just the index of the slide in the array of slides. So when I click a thumbnail to navigate slide number n, the only thing I do is updating this internal state, then the rendering takes care of setting the left style property based on this index.

I don't see how I can add animation to this carousel. Any help/hint greatly appreciated.

I created a carousel with React.js, it was simple until I arrived at the animation problem. The carousel is classic, it is posed of "slides" of content, of small bullets indicating the current slide, and of small thumbnails for navigating between the slide.

The carousel ponent is data-driven, meaning that it is passed its content as a javascript array of objects. Each slide is a li tag within a ul, and just have to change the margin-left css property of the ul to move from one slide to another.

I'm wondering if I should use the ReactTransitionGroup or ReactCSSTransitionGroup to animate the transition from one slide to another. Basically the transition is a sliding effect from left to right when going from one slide to another.

My understanding is that the ReactTransitionGroups API is helpful when adding or removing some content. Here I won't add/remove any slide, change changing the visible one with an animation.

My difficulty wrapping my head around this is that I developped a static (aka without animation) carousel where the currently displayed slide is the only state saved in the ponent. This state is just the index of the slide in the array of slides. So when I click a thumbnail to navigate slide number n, the only thing I do is updating this internal state, then the rendering takes care of setting the left style property based on this index.

I don't see how I can add animation to this carousel. Any help/hint greatly appreciated.

• javascript
• css
• animation
• carousel
• reactjs

Share Improve this question Follow asked Apr 28, 2014 at 16:26 DjebbZDjebbZ 1,60411 gold badge2020 silver badges3434 bronze badges 6

• 2 You can just use CSS3 transitions on the margin-left; the only tricky part is when you're at the end and want to go to index 0. – Brigand Commented Apr 28, 2014 at 17:05
• 1 Mmmh... The "end" part is already taken care of in my code, so it should do the trick. Thanks ! – DjebbZ Commented Apr 28, 2014 at 20:35
• 1 Could you share your code so that others could also benefit from it.. – myusuf Commented May 3, 2014 at 10:13
• 1 It's closed source, for a mercial project. But it might be abandoned for something else. If it's the case I will have no problem sharing it. Stay tuned. – DjebbZ Commented May 4, 2014 at 2:19
• 1 so how'd this go? any more info? – Brad Parks Commented Jun 4, 2014 at 10:19

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 8

The answer was fairly simple, no need to use ReactTransitionGroup or ReactCSSTransitionGroup. I simply used inline css with css3 transitions.

In the render function, we dynamically calculate the left property. As our slides all have the same fixed width, the slides are displayed inline and only one slide is made visible thanks to overflow: hidden on the parent element. Our dynamic class code looked like this :

var styles = {
    position: "absolute",
    top: 0,
    left: IMG_WIDTH * (this.props.idx - this.props.activeIdx),
    zIndex: 100,
    transition: 'left 1s',
    width: '100%'
};

Don't look at the formula too much, it's an implementation detail.

Further note, our carousel is "infinite", meaning that the transition always go one way - from left to right - even when on the first or last element. It was "just" a matter of playing with the indices of the array of content. This part was a bit harder than the carousel itself.

Side note (even troll) : even the hard part was better that doing tricky and cabalistic direct DOM manipulation since it was pure algorithms with data. No more jQuery for this stuff, and even for the rest of our website.

本文标签： javascriptAnimating a custom carousel with ReactjsStack Overflow