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 ul/li block, thanks to AngularJS magic :)

Carousels are data-bound to your ngRepeat collections, can be DOM buffered (good for performance), can cycle over your fixed collection or receive on-demand slides for infinite carousels :)

Try to swipe these demos with your mouse or your finger :

Simple carousel

A very basic carousel with indicators

Simple carousel without ng-repeat

This carousel use the ul/li structure to generate the slides

This carousel has two way data-binding, custom controls and is buffered (only 3 slides rendered)

Our Public GitHub repos

This carousel has a more advanced template and DOM buffered.

Other examples

  • Fullscreen Flickr demo (mobile) : demo using Flickr API and a carousel to display Flickr groups feeds
  • Infinite carousel 1 : using rn-carousel-prev and rn-carousel-next
  • Infinite carousel 2 : using rn-carousel-infinite and prev/next callbacks
  • add/remove slides dynamically : using the rn-carousel-watch attribute