Angular directive for slick-carousel
Clone or download
Latest commit e6f061c Jun 14, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 3.1.7 Aug 4, 2016
examples some improvement in the scss file and some organization Aug 24, 2016
scss some improvement in the scss file and some organization Aug 24, 2016
src Merge pull request #92 from rzubov/master Aug 4, 2016
test fix error May 17, 2016
.bowerrc dev 3.0 Jul 19, 2015
.editorconfig dev 3.0 Jul 19, 2015
.gitignore updated README Jul 19, 2015
.jshintrc dev 3.0 Jul 19, 2015
.yo-rc.json dev 3.0 Jul 19, 2015
Gruntfile.js grunt serve added, fixed grunt watch Sep 26, 2016
LICENSE added test Sep 25, 2015
README.md Create README.md Jun 14, 2017
bower.json fix bugs Aug 4, 2016
gulpfile.js fixed dynamic data Jul 21, 2015
karma.conf.js added test Sep 25, 2015
package.json grunt serve added, fixed grunt watch Sep 26, 2016
protractor.conf.js dev 3.0 Jul 19, 2015

README.md

angular-slick-carousel

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

Join the chat at https://gitter.im/devmark/angular-slick-carousel

Angular directive for slick-carousel

Summary

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: {}
    }
  1. 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