Skip to content

Latest commit

 

History

History
66 lines (53 loc) · 2.3 KB

README.md

File metadata and controls

66 lines (53 loc) · 2.3 KB
Raw

Angular Carousel 3D

Angular directive that allow you to build 3D carousel.

Carousel DEMO PAGE

Usage :

  • If you use bower, just bower install angular-carousel-3d. If not, download files from the github repo.
  • Add angular-swipe.js, angular-carousel-3d.css, and angular-carouse3d.js to your code:
<link href="angular-carousel-3d.css" rel="stylesheet" type="text/css" />
<script src="angular.js"></script>
<script src="angular-swipe.js"></script>
<script src="angular-carousel-3d.js"></script>
  • Add the angular-carousel-3d module as a dependency to your application module:
angular.module('MyApp', ['angular-carousel-3d']);
  • Add a carousel-3d attribute to any element.
  • Add ng-model with your array of objects
  • Add carousel3d-slide directive and ng-repeat to render slides
<div carousel3d ng-model="arrayOfObjects">
    <div carousel3d-slide ng-repeat="slide in app.slides track by $index">
        <figure>
            <img ng-src="{{slide.src}}" alt=""/>
            <figcaption ng-bind="slide.caption"></figcaption>
        </figure>
    </div>
</div>
  • Directive works with or without jQuery.

Directive options :

options options object with properties:

  • sourceProp image source property (Default: 'src')
  • visible number of visible slides (Default: 0)
  • perspective slide distance between z=0 (Default: 35)
  • animationSpeed slide animation speed in ms (Default: 500)
  • width: width of slide (Default: 360)
  • height: height of slide (Default: 270)
  • border: width of slide border (Default: 0)
  • space: space between slides (Default: 'auto')
  • clicking: enable navigation with slide clicking (Default: false)
  • loop: slide looping (Default: false)
  • inverseScaling: Scale of background slides (Default: 250)
  • controls: toggle arrow controls on carousel (Default: false)

Directive callbacks :

on-selected-click : Callback that is invoked when the center slide was clicked.

on-slide-change : Callback that is invoked when the slide is changed.

on-last-slide : Callback that is invoked on last slide selected.

on-before-change : Callback that is invoked before slide change.

To do:

  • Vertical Carousel option
  • Auto scroll option
  • Add tests