Skip to content

facultymatt/angular-carousel

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Usage :

  1. Add angular-carousel.css, angular-carousel.js and angular-mobile.js (from this repo) to your code:
<link href="lib/angular-carousel.css" rel="stylesheet" type="text/css" />
<script src="lib/angular.js"></script>
<script src="lib/angular-mobile.js"></script>
<script src="lib/angular-carousel.js"></script>
  1. Add a dependency to the angular-carousel module in your application.
angular.module('MyApp', ['angular-carousel']);
  1. 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>
  1. 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>
  1. Alternatively, for an infinite carousel, use the rn-carousel-prev and rn-carousel-next callbacks :
<div rn-carousel-infinite rn-carousel-next="next(item)" rn-carousel-prev="prev(item)" rn-carousel-current="product">
  <h1> #{{ product.id }} </h1>
  {{ product.description }}
</div>

The prev() and next() function return promises containing the prev and next slide.

Features :

  • Mobile friendly, tested on webkit+firefox
  • CSS 3D transformations with GPU accel

Regular carousel :

  • rn-carousel-index two way binding to control the carousel position.
  • rn-carousel-indicator to turn on the indicator, see demo page.
  • rn-carousel-buffered to buffer the carousel, good to minimize the DOM.
  • rn-carousel-cycle to have an forever-cycling carousel. (BROKEN)
  • rn-carousel-watch force deep watch of the ngRepeat collection (listen to add/remove items).

Infinite carousel :

You can setup a dynamic, infinite carousel that will load slides on demand using a promise.

  • rn-carousel-infinite : use this to setup an infinite carousel without the initial ul/li structure.
  • rn-carousel-next="getNextSlide(item)" : callback called when carousel reach the last slide, that should return a single slide. great for generating slides on-demand.
  • rn-carousel-prev="getPrevSlide(item)" : callback called when carousel reach the first slide, that should return a single slide. great for generating slides on-demand.
  • rn-carousel-current : data-binding to the current carousel item. will be sent as first argument to the prev/next callbacks.

Todo :

  • memory profiling
  • optional auto-slide
  • buffering : allow buffer size tuning (default=3 slides)
  • buffering : add intelligent indicators

Inspirations

Licence

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

About

Mobile friendly AngularJS carousel

Resources

Stars

Watchers

Forks

Packages

No packages published