angular-carousel demo

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 -

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

- -

-
- #{{ slide.id }} -
-

- -

AngularJS Touch Carousel