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
-
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
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