Skip to content

Latest commit

 

History

History
80 lines (63 loc) · 3.11 KB

README.md

File metadata and controls

80 lines (63 loc) · 3.11 KB
Raw

AngularJS Touch Carousel

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 IE<=9, iOS<7 or Android<4 please include the requestAnimationFrame polyfill in your application.

Usage :

  • If you use bower, just bower install angular-carousel. If not, download files from the github repo
  • Add angular-touch.js, angular-carousel.css, and 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" ng-style="{ backgroundImage: '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>

Features :

  • Mobile friendly, tested on webkit+firefox
  • Use CSS 3D transformations and requestAnimationFrame. (fallback to CSS 2D if 3D support not available)
  • DOM buffering
  • Index data-binding
  • Optional indicators

Regular carousel :

  • 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)
  • rn-carousel-auto-slide integer value will make the slider automatically change the visible slide after given seconds
  • rn-carousel-pause-on-hover="true" prevent auto-slide on hover
  • rn-carousel-prevent-animation="true" if you dont want animations

Todo :

Contributing

Inspirations

License

As AngularJS itself, this module is released under the permissive MIT license. Your contributions are always welcome.