A ReactJS based carousel. No dom manipulation, no jQuery, all based on ReactJS states and intelligent rendering and the aid of `ReactCSSTransitionGroup`. Check also the css: https://gist.github.com/zimok/10018721

Carousel.coffee

`/** @jsx React.DOM */`

classSet = React.addons.classSet
ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
ReactTransitionGroup = React.addons.TransitionGroup

CarouselStateMixin = 
	propTypes:
		items: React.PropTypes.array

	getInitialState: ->
		index: 0
		activeItems: [@props.items[0]]
		direction: 'forward'

	setActiveItem: (index, direction) ->
		newItem = @props.items[index]
		newItems = @state.activeItems

		newItems.pop()
		newItems.unshift(newItem)

		@setState
			index: index
			activeItems: newItems
			direction: direction

	handleNext: (e) ->
		e.preventDefault()

		index = @state.index
		index += 1
		
		if index == @props.items.length
			index = 0

		@setActiveItem index, 'forward'

	handlePrevious: (e) ->
		e.preventDefault()

		index = @state.index
		index -= 1
		
		if index < 0
			index = @props.items.length - 1

		@setActiveItem index, 'backward'

CarouselControls = React.createClass
	render: ->
		`<div className="carousel-controls">
				<a href="" onClick={this.handlePrevious}>prev</a> 
				<a href="" onClick={this.handleNext}>next</a>
		</div>`

	handleNext: (e) ->
		@props.onNext(e)

	handlePrevious: (e) ->
		@props.onPrevious(e)

CarouselItem = React.createClass
	render: ->

		classes = classSet
			'carousel-item': true
			active: @props.active
			
		`<div className={classes}>
			{this.props.itemComponent({item: this.props.item})}
		</div>`

Carousel = React.createClass
	mixins: [CarouselStateMixin]

	render: ->		
		self = @
		children = @state.activeItems.map (item, i) ->
			`<CarouselItem
				item={item} 
				key={item.key} 
				active={i==self.state.index}
				itemComponent={self.props.itemComponent}
			/>`
		
		`<div className={"carousel " + this.state.direction}>
			<ReactCSSTransitionGroup transitionName='slide'>
				{children}
			</ReactCSSTransitionGroup>
			<CarouselControls onNext={this.handleNext} onPrevious={this.handlePrevious}/>
		</div>`

# example

carouselItems = [
	{
		'title': 'item 1',
		'img': 'http://placehold.it/400x400',
		'key': 1
	},
	{
		'title': 'item 2',
		'img': 'http://placehold.it/400x400',
		'key': 2
	},
	{
		'title': 'item 3',
		'img': 'http://placehold.it/400x400',
		'key': 3
	}
]

CarouselCustomItem = React.createClass
	render: ->
		`<div>i'm the custom item: {this.props.item.title}</div>`

CarouselExample = React.createClass
	render: ->
		`<Carousel items={carouselItems} itemComponent={CarouselCustomItem} />`

mountNode = document.getElementById 'content'
React.renderComponent `<CarouselExample />`, mountNode