{{item.title}}
{{item.description}}
bower install skitter --save
bower install angular-skitter --save
angular-skitter
depends on: jQuery, jQuery.easing and Angular.
We manage to create a directive to easily create a gallery <ng-skitter items="photos" options="skitterOption">
.
Items defines the source pictures for the gallery
$scope.photos = [ { src: 'https://skitterp-4b51.kxcdn.com/images/mountains/3-sand-mountain-clouds.jpg', title: 'Donec sollicitudin molestie', description: 'Vivamus suscipit tortor eget felis porttitor volutpat. Donec sollicitudin molestie malesuada.', url: 'http://www.google.com' }, { src: 'https://skitterp-4b51.kxcdn.com/images/mountains/4-landscape-with-tree-hills-and-lake.jpg', title: 'Vivamus suscipit tortor', description: 'Vivamus suscipit tortor eget felis porttitor volutpat. Donec sollicitudin molestie malesuada.', url: 'http://www.facebook.com' } ]
Options defines the configuration to apply to the gallery. All available options are listed in the official doc here
$scope.skitterOption = { auto_play: false, theme: "clean", navigation: true, animation: "cubeShow", dots: true }
You can customize the html adding for example title and description inside each image. just insert your custom html inside the tag<ng-skitter>
.
<ng-skitter items="photos" options="skitterOption"> <p><strong>{{item.title}}</strong></p> <p>{{item.description}}</p> </ng-skitter>
Skitter has 38 different animations: ['cube', 'cubeRandom', 'block', 'cubeStop', 'cubeStopRandom', 'cubeHide', 'cubeSize', 'horizontal', 'showBars', 'showBarsRandom', 'tube', 'fade', 'fadeFour', 'paralell', 'blind', 'blindHeight', 'blindWidth', 'directionTop', 'directionBottom', 'directionRight', 'directionLeft', 'cubeSpread', 'glassCube', 'glassBlock', 'circles', 'circlesInside', 'circlesRotate', 'cubeShow', 'upBars', 'downBars', 'hideBars', 'swapBars', 'swapBarsBack', 'swapBlocks', 'cut']