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)

A simple buffered ng-repeat with a custom template.
Swipe 50 slides with only 5 slides in the DOM

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

template-based demo

Various blocks automagically converted to a carousel.
Just add rn-carousel-indicator to display clickable indicators

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

Standard carousel with thumbs navigation

This one has an initial index and the thumbs controls the rn-carousel-index binding

carousel with builtin prev/next controls

just add rn-carousel-control attribute to enable builtin controls

{{ slide.label }} / {{ slides.length }}

buffered ngRepeat carousel with custom controls

Custom controls demo, just update the rn-carousel-index index binding

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

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

object-based ngRepeat carousel with indicators

Use the object-based ngRepeat syntax. (not compatible with buffering)

{{ label }}

togglable carousel via ng-if

If you use ng-if, be sure to use the dot-notation syntax for the index binding as it creates a child scope.

#{{ $index + 1 }}

Autoplay slider

By adding rn-carousel-auto-slide with an integer value will make the slider automatically change the visible slide after n seconds
By adding rn-carousel-pause-on-hover="true" the slide will pause on mouse hover and start on mouse leave

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

Other demos

Flickr browser