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)

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

template-based demo

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

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

buffered ngRepeat carousel with custom controls

Custom controls demo, just update the rn-carousel-index index binding
{{ slideIndex + 1 }} / {{ slides4.length }}

object-based ngRepeat carousel with indicators

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

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.


Other demos