Angular directive for slick jquery carousel. Demo is here.
bower install angular-slick
jquery
, angular
, slick-carousel
and angular-slick
to your code:<link rel="stylesheet" href="https://github.com/vasyabigi/angular-slick/blob/master/bower_components/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="https://github.com/vasyabigi/angular-slick/blob/master/bower_components/slick-carousel/slick/slick-theme.css">
<script src="https://github.com/vasyabigi/angular-slick/raw/master/bower_components/jquery/jquery.js"></script>
<script src="https://github.com/vasyabigi/angular-slick/raw/master/bower_components/angular/angular.js"></script>
<script src="https://github.com/vasyabigi/angular-slick/raw/master/bower_components/slick-carousel/slick/slick.js"></script>
<script src="https://github.com/vasyabigi/angular-slick/raw/master/bower_components/angular-slick/dist/slick.js"></script>
slick
module in your application.angular.module('MyApp', ['slick']);
slick
element to your html:<slick>
...
</slick>
<slick infinite=true slides-to-show=3 slides-to-scroll=3>
...
</slick>
<slick dots=true infinite=false speed=300 slides-to-show=5 touch-move=false slides-to-scroll=1>
...
</slick>
init-onload
property. Example:<slick init-onload=true data="awesomeThings">
...
</slick>
That's it!