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
index :
  • #{{ slide.id }}

ngRepeat with auto-slide, controls and indicators

index:
  • #{{ slide.id }}

ngRepeat with custom transition

Use the 'hexagon' transition. index is shared with the carousel below.
  • #{{ slide.id }}

ngRepeat with custom transition

Use the 'zoom' transition. index is shared with the carousel above.
  • #{{ 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