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

Buffered ngRepeat demo

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

buffered ngRepeat with auto-slide(pause on hover) and builtin indicators

buffered ngRepeat and custom indicators

buffered ngRepeat with custom transition

Use the 'hexagon' transition. index is shared with the carousel below.

Custom templates without ng-repeat and auto-slide

Lockable carousel

use rn-carousel-locked binding to dynamically lock/unlock the carousel

Add/Remove items in the collection

The carousel is bound to your ngRepeat collection.
If you add items at the start of the collection, then by default, the slide position will change.
If you want to preserve position even when adding items at the head of the collection, you need to add the `rn-carousel-deep-watch` attribute. This has a performance impact so use carefully.
Works great with buffering too so you can have almost infinite slides while keeping only 5 items in the DOM

End to End Swiping

The carousel is bound to your ngRepeat collection.
Total images: {{ totalimg }}
Images in one set: {{ setOfImagesToShow }}
Total sets of images: {{ totalimg / setOfImagesToShow | number:0}}