Fork me on GitHub

AngularJS Touch Carousel

Transform your ng-repeat or DOM nodes in a mobile-friendly carousel just by adding a 'rn-carousel' attribute to your HTML; AngularJS directives FTW :)

Carousels are data-bound to your ngRepeat collections and can be DOM buffered (good for performance)

Swipe these demos with your mouse or finger :

ngRepeat demo (buffered carousel)

{{ slide.label }} / {{ slides.length }}
carouselIndex: {{ carouselIndex }}
carouselBufferIndex: {{ carouselBufferIndex }}

template-based demo

This is a standard template
slide #1
Here's sophie :
A friend of mine :
And to finish :

buffered ngRepeat carousel with custom controls

{{ slide.label }} / {{ slides2.length }}
carouselIndex: {{ carouselIndex }}
carouselBufferIndex: {{ carouselBufferIndex }}

{{ slideIndex + 1 }} / {{ slides2.length }}

object-based ngRepeat carousel with indicators

{{ label }}

Other demos

Flickr browser