An AngularJS carousel implementation optimised for mobile devices.
Demo : http://revolunet.github.io/angular-carousel
Comments and contributions welcome :)
Proudly brought to you by the @revolunet team.
NOTE : if you use iOS<7 or Android<4 please include the requestAnimationFrame polyfill in your application.
- If you use bower, just
bower install angular-carousel
. If not, download files from the github repo - Add
angular-carousel.css
,angular-carousel.js
to your code:
<link href="angular-carousel.css" rel="stylesheet" type="text/css" />
<script src="angular.js"></script>
<script src="angular-touch.js"></script>
<script src="angular-carousel.js"></script>
- Add a dependency to the
angular-carousel
module in your application.
angular.module('MyApp', ['angular-carousel']);
- Add a
rn-carousel
attribute to your<ul>
block and your<li>
's become magically swipable ;)
<ul rn-carousel class="image">
<li ng-repeat="image in sportImages" style="background-image:url({{ image }});">
<div class="layer">{{ image }}</div>
</li>
</ul>
- You can also use
rn-carousel
without ng-repeat ;)
<ul rn-carousel class="image">
<li>slide #1</li>
<li>slide #2</li>
<li>slide #3</li>
</ul>
- Add a
rn-carousel-ie9support
attribute to your<ul>
block to enable compatibility with the browser Internet Explorer 9. For this to work, you need to instal any requestAnimationFrame polyfill, for example the raf.js module ( "bower install raf.js")
<ul rn-carousel rn-carousel-ie9support class="image">
<li ng-repeat="image in sportImages" style="background-image:url({{ image }});">
<div class="layer">{{ image }}</div>
</li>
</ul>
- Mobile friendly, tested on webkit+firefox
- use CSS 3D transformations and
requestAnimationFrame
. (disabled for IE9) - DOM buffering
- index data-binding
- optional indicators
- optional support for Internet Explorer 9
rn-carousel-index
two way binding to control the carousel position.rn-carousel-indicator
boolean value to enable the indicator, see demo page.rn-carousel-buffered
boolean value to enable the carousel buffering, good to minimize the DOM, defaults to 5 slides. (works only with arrays)rn-carousel-swipe
boolean value to enable/disable swiping (default true)rn-carousel-control
boolean value to enable builtin prev/next buttons (you can override by CSS)
- see the TODO file
- Please follow AngularJS GIT conventions
- Please add tests
- Please update the README and demo (index.html)
- https://github.com/ajoslin/angular-mobile-nav
- http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
- http://ariya.ofilabs.com/2013/08/javascript-kinetic-scrolling-part-1.html
- Thanks to all angular folks for all the tips :)
As AngularJS itself, this module is released under the permissive MIT license. Your contributions are always welcome.