AngularJS Touch Carousel

An AngularJS 1 carousel implementation optimised for mobile devices.

This project is not maintained anymore, and looking for maintainers.

Demo : http://revolunet.github.io/angular-carousel

Comments and contributions welcome :)

Proudly brought to you by the @revolunet team.

Install :

Bower

bower install angular-carousel

npm

npm install angular-carousel

If you don't use NPM or Bower, just download files from the github repo

Usage :

Add angular-touch.js and angular-carousel.js to your code:

<script src="angular.js"></script>
<script src="angular-touch.js"></script>
<script src="angular-carousel.js"></script>

Or just require the module the CommonJS way (if you use npm)

var angular = require('angular');
var ngTouch = require('angular-touch');
var carousel  = require('angular-carousel');

Add angular-carousel.css to your code:

<link href="angular-carousel.css" rel="stylesheet" type="text/css" />

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">
    <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>

Directive options :

rn-carousel-index two way binding integer to control the carousel position (0-indexed)
rn-rn-carousel-html-slides: two way binding array to get slides if no ng-repeat was used (slides array)
rn-carousel-buffered add this attribute to enable the carousel buffering, good to minimize the DOM (5 slides)
rn-carousel-controls add this attribute to enable builtin prev/next buttons (you can override by CSS)
rn-carousel-auto-slide add this attribute to make the carousel slide automatically after given seconds (default=3)
rn-carousel-transition : transition type, can be one of slide, zoom, hexagon, fadeAndSlide, none. (default=slide)
rn-carousel-locked: two way binding boolean that lock/unlock the carousel
rn-carousel-deep-watch: Deep watch the collection which enable to dynamically add slides at beginning without corrupting position
rn-carousel-easing: add this attritube to specify a formula for easing, these can be found in the shifty library (default=easeIn)
rn-carousel-duration: add this attribute to set the duration of the transition (default=300)
rn-carousel-controls-allow-loop: add this attribute to allow looping through slides from prev/next controls

Indicators

You can add position indicators by adding this directive where you want :

<div rn-carousel-indicators ng-if="slides.length > 1" slides="slides" rn-carousel-index="carouselIndex"></div>

slides is the same collection you use in the carousel ng-repeat

Note: If loading in slides from an async service, the ng-if="slides.length > 1" may not update as expected. In this case, try ng-if="slides".

carouselIndex is the same index you've defined for the carousel

Note: If the indicators don't seem to update with the slides, try binding to an object param i.e. carousel.index, set in the controller like $scope.carousel.index = 0 Explanation.

Notes :

if you use IE<=9, iOS<7 or Android<4 please include the requestAnimationFrame polyfill in your application.
if you use IE<=8 include the es5-shim polyfill in your application.
don't set any style attribute to your li's. they would be overwritten by the carousel (use classes instead).
angular-carousel use the great shifty.js for the animations

Todo :

delay autoslide on indicators click/move
customisable transitions
more transition types
infinite loop support

Contributing

Please follow AngularJS GIT conventions
Please add tests
Please update the README and demo (index.html)

Inspirations

License

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

License

revolunet/angular-carousel

ErrorLooks like something went wrong!

About

Resources

License

Stars

Watchers

Forks

Releases 27

Packages 0

Contributors 50

Languages

Error
Looks like something went wrong!

Packages