angular-slick-carousel

Angular directive for slick-carousel

Release: 1.0

1. [BC-BREAK] You must now use ng-transclude when including this directive.
2. You can now use JS to specify a variety of sources in a media array, and later use ng-repeat to iterate inside the directive contents. See example2.
3. There is an additional on-directive-init attribute available now. Use this to use the handle object to do something on directive init. This is different from the underlying slick.js onInit in that the handle object is now ready to use (with all the setup to call underlying slick.js calls).

Usage

This directive allows you to use the slick-carousel plugin as an angular directive. It can be specified in your HTML as either a <div> attribute or a <slick> element.

<slick settings="scoped-settings" control="scoped-control-handle">
</slick>

Steps

1. Include the slick.js at the base of this repo, or install through bower:

bower install angular-slick-carousel

2. Add it to your HTML using usual <script> tags.
3. In your angular app definition, define bardo.directives as a dependency.

angular.module('slickExampleApp', ['bardo.directives'])

4. That should be it. Now, you can specify the usual options to the carousel plugin using either a JavaScript settings object on scope, or as data-<setting-name> attributes in the HTML tag itself. Note that specifying data- prefixed names helps avoid issues with camel-cased settings options.

Control

1. All the functions in the plugin are exposed through a control attribute.
2. To utilize this architecture, and have two-way data-binding, define an empty control handle on scope:

$scope.slickHandle = {

};

3. Pass it as the value to control attribute. Now, you can call any plugin methods as shown in the example.

<button ng-click="slickHandle.slickGoTo(2)">slickGoTo(2)</button>
<button ng-click="slickHandle.slickPrev()">slickPrev()</button>
<button ng-click="slickHandle.slickNext()">slickNext()</button>
<button ng-click='slickHandle.slickAdd("<div>New</div>")'>slickAdd()</button>
<button ng-click='slickHandle.slickRemove(3)'>slickRemove(3)</button>
<button ng-click='slickHandle.slickPlay()'>slickPlay()</button>
<button ng-click='slickHandle.slickPause()'>slickPause()</button>

Demo

1. Look at the example in this repo for full usage.
2. Running examples: hardcoded-assets and ng-repeated-assets.
3. Or, clone the repo and run a simple HTTP server in the example directory.