Carousel directive for Ionic Frameworks that let you use any custom template as an item.
To be able to see the demo correctly you need to see the page in device mode / mobile emulation. Instructions for Chrome here and for Firefox here
To test the demo locally
cd demo
bower install
ionic serve
-
If you use bower, just
bower install ionic-advanced-carousel
. If not, download files from the github repo. -
Include
advanced-carousel.min.js
, andadvanced-carousel.min.css
:
<link href="advanced-carousel.min.css" rel="stylesheet" />
<script src="advanced-carousel.min.js"></script>
- Add
aCarousel
as a dependency to your application module:
angular.module('app', ['aCarousel']);
- Put the following markup in your template:
<a-carousel
item-directive="name-of-your-directive"
carousel-options="::vm.carouselOptions"
array-provider="::vm.carouselData"
on-select="vm.onSelectCarousel(item)">
</a-carousel>
- carousel-id (@) : unique id for the carrousel (mandatory)
- array-provider: an array of object which will serve as 'model' for your carousel items so you can bind any value.
- item-directive (optional): the name of the directive you want to use as an item.
One directives item is already included inside the advanced carousel: 'carousel-text-item' for simple text display. To use this text item, just pass it to the directive and the carousel will look for a 'display' property on the object pass through array-provider
[{id:0, display'item1'}, ...]
. If you don't set this parameter you must indicate a templateUrl through the options (see below). - carousel-options: a set of options to initiate the carousel. See example below. Don't forget the :: for one-time binding.
- on-select: method to be called when an item is selected
var options = {
template : null, // templateUrl in case you don't need to pass a directive but just a html view
align : 'left', // alignement of the carousel
centerOnSelect: true, // center carousel when an item is selected
trackBy : '$index', // indicate a track by property
selectFirst : true, // select first carousel item at start
selectAtStart : { // optional => Select at start the item with the property (string) with value passed
property: null,
value : null
},
pullRefresh : { // optional => set active to true for pull refresh passing a callBack
active : false,
callBack: angular.noop
}
};
After you make a change to the array provider, broadcast the 'a-carousel.arrayupdated' event passing the carousel id to update the carousel.
$scope.$broadcast('a-carousel.arrayupdated', 'my-carousel-id');
At the end of a pull refresh callback
$scope.$broadcast('a-carousel.pullrefresh.done');
To desactive a carousel item.
var params {
idContains:'carousel-', // this will unselect all carousel with an id that contains "carousel-" (ex: carousel-1, carousel-2, carousel-3)
except:'carousel-1' // but will not touch at carousel-1
}
$scope.$broadcast('a-carousel.desactivateItem', params);