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
index :
#{{ slide.id }}
buffered ngRepeat with auto-slide(pause on hover) and builtin indicators
index:
#{{ slide.id }}
buffered ngRepeat and custom indicators
#{{ slide.id }}
★
buffered ngRepeat with custom transition
Use the 'hexagon' transition. index is shared with the carousel below.
#{{ slide.id }}
Custom templates without ng-repeat and auto-slide
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Lockable carousel
use rn-carousel-locked binding to dynamically lock/unlock the carousel
#{{ slide.id }}
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
#{{ slide.id }}
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}}
