Lazy Carousel

Installation

Directive for instantiate a responsive lazy loading carousel from a JSON.
Available as bower component for your project:

$ bower install rl-lazy-carousel

Add lazy-carousel.js and lazy-carousel.css to your project from bower package

Usage

Add rl.lazy-carousel as a depency of your App:

angular.module('yourApp',['rl.lazy-carousel'])

Then lazy-carousel directive is ready. Remember to add a source attribute that link to a JSON file. Example:

<div lazy-carousel data-source="path_to_your_json"></div>

Json file by source attr

Lazy Carousel use a JSON file to generate automatically a carousel of images:

{
  "items" : [
    {
      "img": "http://res.cloudinary.com/buddahbelly/image/upload/v1423072364/brilliantbritz/angular-js.png",
      "alt" : "Angular JS framework"
    },
    {
      "img": "http://yeoman.io/assets/img/illustration-home-inverted.1f86.png",
      "alt" : "Yeoman!"
    },
    {
      "img": "http://bower.io/img/bower-logo.png",
      "alt" : "I'm a bird, my name is Bower"
    },
    {
      "img": "https://lh5.googleusercontent.com/-mrFw71M_puI/VE5722ZV70I/AAAAAAAABsE/p4DW4sTySLs/s640-no/nodejs-512%5B1%5D.png",
      "alt" : "Node.js"
    },
    {
      "img": "https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png",
      "alt" : "Hey, Github is here!"
    },
    {
      "img": "http://devstickers.com/assets/img/pro/jv81.png",
      "alt" : "slurp! gulp!"
    }
    
  ]
}