Angular-Skitter

Slider directive for angular 1.x based on jQuery Skitter. A jquery slider responsive with multiple transitions and customization.

{{item.title}}

{{item.description}}

Bower Install

bower install skitter --save

bower install angular-skitter --save

Dependencies

angular-skitter depends on: jQuery, jQuery.easing and Angular.

Usage

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>
                

Available animations

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']