Angular预加载轮播图 -lazy-carousel

Angular预加载轮播图 -lazy-carousel
插件名称 lazy-carousel
发布时间 2020年6月16日
插件作者 renoiser

一个Angular指令,用于通过JSON延迟加载图片创建响应式轮播。

安装:

# NPM
$ npm install rl-lazy-carousel --save

用法

添加rl.lazy-carousel作为您的应用程序的依赖:

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

然后, lazy-carousel  指令已准备就绪。请记住要添加链接到JSON文件的源属性。例:

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

Json文件按来源attr

预加载轮播使用JSON文件自动生成图像轮播:

{
  "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!"
    }
    
  ]
}