An angular coverflow directive that uses requestAnimationFrame() and CSS3 transformations to achieve super-fluid animations.
The directive with all its content is embedded in angular's digest cycle so all values are watchable, etc.
Use the Chrome touch overrides or a mobile device to swipe over the covers:
bower install angular-coverflow- Include the
coverflow.jsscript provided by this component into your app. - Include the
coverflow.cssstyle provided by this component. - Add
angular-coverflowas a module dependency to your app.
Provide a directive handle and an image array in a controller:
angular.module('angular-coverflow-example').controller('example-controller', function($scope){
// Directive handle to watch values
$scope.coverflow = {};
// Coverflow image array
$scope.images = [
'../covers/1.jpg',
'../covers/2.jpg',
'../covers/3.jpg',
'../covers/4.jpg',
'../covers/5.jpg',
'../covers/6.jpg',
'../covers/7.jpg',
'../covers/8.jpg',
'../covers/9.jpg',
'../covers/10.jpg',
'../covers/11.jpg',
'../covers/12.jpg',
'../covers/13.jpg',
'../covers/14.jpg',
'../covers/15.jpg',
'../covers/16.jpg',
'../covers/17.jpg',
'../covers/18.jpg',
'../covers/19.jpg',
'../covers/20.jpg'
];
});Include the directive:
<body ng-controller="example-controller">
<coverflow coverflow="coverflow" images="images"></coverflow>
<!-- Use {{coverflow.positionIndex}}, ... to display current selected cover -->
</body>MIT