Angular Carousel 3d
npm install angular-carousel-3d
Angular directive that allow you to build 3D carousel.
1. If you use bower, just run bower install angular-carousel-3d. If not, download files angular-swipe.js, carousel-3d.css, and carouse3d.js from the following github repos :
- Angular Swipe
- Angular Carousel 3D
Note: you can download and use the minified versions as well.
2. Add theses files to your code:
``html`
3. Add the angular-carousel-3d module as a dependency to your application module:`js`
angular.module('MyApp', ['angular-carousel-3d']);
4. In your template :
- Add a carousel-3d attribute to any element.ng-model
- Add with your array of objectscarousel3d-slide
- Add directive and ng-repeat to render slides`html`
jQuery.
Note: the directive works with or without
: an array containing the list of carousel slides
- options: an object containing theses properties:
- loop: slide looping (Default: false)
- clicking: enable navigation with slide clicking (Default: false)
- sourceProp image source property (Default: '')
- visible number of visible slides (Default: 5)
- perspective slide distance between z=0 (Default: 35)
- animationSpeed slide animation speed in ms (Default: 500)
- dir direction of the automatic slide (Default: ltr, Available options : 'rlt', 'ltr')
- 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)
- topSpace: space XXXX (Default: auto)
- controls: toggle arrow controls on carousel (Default: false)
- startSlide: scale of background slides (Default: 0)
- inverseScaling: scale of background slides (Default: 300)
- autoRotationSpeed: scale of background slides (Default: 0)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. Prevent the carousel from sliding by returning the boolean value false` inside the callback.