Angular directive for Slick Carousel


Directive for Slick Carousel

An Angular directive for slick carousel, which is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

Usage for Slick Carousel


  • Using bower to install it. bower install angular-slick-carousel
  • Add jqueryangularslick-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 for Carousel

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
            }
        }
    };

angular-slick

Angular directive for slick jquery carousel. Demo is here.

Usage:

  • Install: bower install angular-slick
  • Add jqueryangularslick-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>

 

Leave a Reply

Your email address will not be published. Required fields are marked *