angular-slick-carousel

angular 2 above take a look https://github.com/devmark/ngx-slick

Angular directive for slick-carousel

Summary

• Usage
• Attributes & Event
• Enable/disable slick
• Method
• Slide data
• Global Config
• faq
• Examples
• Creator

Usage

• Using bower to install it. bower install angular-slick-carousel
• Add jquery, angular, slick-carousel and angular-slick-carousel 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-carousel/dist/angular-slick.min.js"></script>

• Add the sortable module as a dependency to your application module: slickCarousel

var myAppModule = angular.module('MyApp', ['slickCarousel'])

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 infinite=true slides-to-show=3 slides-to-scroll=3>     ...     </slick>      <slick         settings="slickConfig" ng-if="numberLoaded">     </slick>

Attributes & Event

settings: optional Object containing any of the slick options. Consult here.

• enabled should slick be enabled or not. Default to true. Example below
• method optional containing slick method. discussed below in detail
• event optional containing slick event

$scope.slickConfig = {     enabled: true,     autoplay: true,     draggable: false,     autoplaySpeed: 3000,     method: {},     event: {         beforeChange: function (event, slick, currentSlide, nextSlide) {         },         afterChange: function (event, slick, currentSlide, nextSlide) {         }     } };

Enable/disable slick

Slick can be easily switched on and off by using enabled settings flag.

    $scope.slickConfig = {         enabled: true,     }     $scope.toggleSlick = function() {       $scope.slickConfig.enabled = !$scope.slickConfig.enabled;     }

    <slick settings="slickConfig">      ...     </slick>     <button ng-click="toggleSlick()">Toggle</button>

Method

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.slickConfig = {         method: {}     }

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

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

Slide data

For change slide content, you have to set ng-if to destroy and init it

• controller:

    $scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}];     $scope.numberLoaded = true;     $scope.numberUpdate = function(){         $scope.numberLoaded = false; // disable slick          //number update          $scope.numberLoaded = true; // enable slick     };

• html:

    <script type="text/ng-template" id="tpl.html">         <h3>{{ i.label }}</h3>     </script>      <slick ng-if="numberLoaded">         <div ng-repeat="i in number">             <div class="" ng-include="'tpl.html'"></div>         </div>     </slick>

Global config

  config(['slickCarouselConfig', function (slickCarouselConfig) {       slickCarouselConfig.dots = true;       slickCarouselConfig.autoplay = false;   }])

FAQ

Q: After change data, could i keep the current slide index? A: For this directive, this will destroy and init slick when updating data. You could get current index by event. example:

    $scope.currentIndex = 0;     $scope.slickConfig = {         event: {             afterChange: function (event, slick, currentSlide, nextSlide) {               $scope.currentIndex = currentSlide; // save current index each time             }             init: function (event, slick) {               slick.slickGoTo($scope.currentIndex); // slide to correct index when init             }         }     };

Examples

Now to run the samples in your local machine you just need to run:

grunt serve

so you will start a web server on http://localhost:8000

now acess the folder examples: http://localhost:8000/examples/#/

Creator

@devmark