Demo for angular-flickity to show creating a slider using the FlickityService. Angular-flickity is an angular wrapper for the Flickity library. https://github.com/benjamincharity/angular-flickity/

<!DOCTYPE html>
<html data-ng-app="demo">

<head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="http://flickity.metafizzy.co/flickity.pkgd.min.js"></script>
    <script src="https://rawgit.com/benjamincharity/angular-flickity/master/dist/angular-flickity.js"></script>
    <link rel="stylesheet" href="http://flickity.metafizzy.co/flickity.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body data-ng-controller="DemoController">
    <section class="demo">

        <h1 class="demo__title">
            angular-flickity
        </h1>

        <h3>Services Demo</h3>

        <button ng-click="goToFirst()">
            Go to first slide
        </button>

        <button ng-click="goToLast()">
            Go to last slide
        </button>
        
        <div
            class="demo__slides"
            bc-flickity="{{ flickityOptions }}"
            bc-flickity-id="{{ flickityId }}"
        >

            <figure class="demo__slide" data-ng-repeat="slide in slides track by $index">
                <img data-ng-src="{{ ::slide }}" alt="" />
            </figure>

        </div>

        
    </section>

</body>
</html>

angular.module('demo', ['bc.Flickity'])
    .controller('DemoController', DemoController);


function DemoController($scope, FlickityService) {
    
    $scope.slides = [
        'http://bnj.bz/2p2S1X471H38/one.jpg',
        'http://bnj.bz/352I0q311A23/two.jpg',
        'http://bnj.bz/3j1J1h1s2o3p/three.jpg',
        'http://bnj.bz/0i0l442Z433Y/four.jpg',
        'http://bnj.bz/2p2S1X471H38/one.jpg',
        'http://bnj.bz/352I0q311A23/two.jpg',
        'http://bnj.bz/3j1J1h1s2o3p/three.jpg',
        'http://bnj.bz/0i0l442Z433Y/four.jpg'
    ];

    // We are defining our own ID so that we can reference it later
    $scope.flickityId = 'flickityId';
    
    // Here are some nice options
    $scope.flickityOptions = {
        cellSelector: '.demo__slide',
        resize: false,
        setGallerySize: false,
        lazyLoad: true,
    };

    // Go to the first slide when clicked
    $scope.goToFirst = function() {
        
        // Go directly to the first cell
        FlickityService.select($scope.flickityId, 0);

    }

    // Go to the last slide when clicked
    $scope.goToLast = function() {
        
        // Use the ID we set earlier to target our Flickity instance to get
        // back an array of the cells. We can use this to determine which index
        // is the last
        FlickityService.cells($scope.flickityId).then(function(cells) {
            // Go directly to the last cell by passing in the last index
            // of the array
            FlickityService.select($scope.flickityId, cells.length - 1);
        });

    }
    
}

# angular-flickity demo

Angular-flickity is an angular wrapper for the Flickity library.

- - -

> _Demo images from http://deathtothestockphoto.com/_

- [angular-flickity](https://github.com/benjamincharity/angular-flickity/)
- [Flickity](http://flickity.metafizzy.co/)

//
// CONFIG
//
$blue: #3498db;
$light_blue: lighten($blue, 35);
$black: #555;
$white: #fcfcfc;
$monospaced_sans  : #{'Lucida Console', Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace};

@mixin bp($point) {
    @media (max-width: 670px) { @content; }
}


//
// BASE
//
html {
    font-family: $monospaced_sans;
    height: 100%;
    min-width: 100%;
}

body {
    min-height: 100%;
    padding: 1rem;
}

small {
    display: block;
}

hr {
    margin: 4rem 2rem 2rem;
}


//
// DEMO
//
.demo {
    background-color: $light_blue;
    color: $black;
    height: 100%;
    min-height: 10rem;
    padding: 2rem 3rem;
    margin: 0 auto;
    max-width: 70rem;
    width: 90%;
    
    @include bp(5) {
        width: 80%;
    };
    
    // <div> container for slides
    &__slides {
        margin-top: 2rem;
        height: 20rem;
    }

    // <figure> individual slide
    &__slide {
        height: 100%;
        text-align: center;
        width: 100%;
    }

}