Angular directive for slick-carousel
ApacheConf JavaScript HTML CSS CoffeeScript
Clone or download
Latest commit 1d3215b Mar 27, 2015
Permalink
Failed to load latest commit information.
app fix destroySlick() with new syntax Mar 27, 2015
dist Bump. Mar 27, 2015
.bowerrc Initial version. Apr 13, 2014
.editorconfig Initial version. Apr 13, 2014
.gitattributes Initial version. Apr 13, 2014
.gitignore Added dist. Apr 13, 2014
.jshintrc Initial version. Apr 13, 2014
Gruntfile.js 0.1.7 May 11, 2014
LICENCE Added licence. Aug 28, 2014
README.md Updated to the latest slick version. Mar 25, 2015
bower.json Bump. Mar 27, 2015
package.json Initial version. Apr 13, 2014

README.md

angular-slick

Angular directive for slick jquery carousel. Demo is here.

Usage:

  • Install: bower install angular-slick
  • Add jquery, angular, slick-carousel and angular-slick to your code:
<link rel="stylesheet" href="bower_components/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="bower_components/slick-carousel/slick/slick-theme.css">
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/slick-carousel/slick/slick.js"></script>
<script src="bower_components/angular-slick/dist/slick.js"></script>
  • Add a dependency to the slick module in your application.
angular.module('MyApp', ['slick']);
  • Add a 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>
  • For initialization carousel after data is loaded use init-onload property. Example:
<slick init-onload=true data="awesomeThings">
  ...
</slick>
  • If you wanna read about possible settings, go here.

That's it!