Angular 中文文档

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.

  1. ``` html
  2.     <link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick.css">
  3.     <link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick-theme.css">
  5.     <script src="../bower_components/jquery/jquery.js"></script>
  6.     <script src="../bower_components/angular/angular.js"></script>
  7.     <script src="../bower_components/slick-carousel/slick/slick.js"></script>
  8.     <script src="../bower_components/angular-slick-carousel/dist/angular-slick.min.js"></script>
  9. ```

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

  1. ``` js
  2. var myAppModule = angular.module('MyApp', ['slickCarousel'])
  3. ```

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.

  1. ``` html
  2.     <slick infinite=true slides-to-show=3 slides-to-scroll=3>
  3.     ...
  4.     </slick>
  6.     <slick
  7.         settings="slickConfig" ng-if="numberLoaded">
  8.     </slick>
  9. ```

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

  1. ``` js
  2. $scope.slickConfig = {
  3.     enabled: true,
  4.     autoplay: true,
  5.     draggable: false,
  6.     autoplaySpeed: 3000,
  7.     method: {},
  8.     event: {
  9.         beforeChange: function (event, slick, currentSlide, nextSlide) {
  10.         },
  11.         afterChange: function (event, slick, currentSlide, nextSlide) {
  12.         }
  13.     }
  14. };
  15. ```

Enable/disable slick


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

  1. ``` js
  2.     $scope.slickConfig = {
  3.         enabled: true,
  4.     }
  5.     $scope.toggleSlick = function() {
  6.       $scope.slickConfig.enabled = !$scope.slickConfig.enabled;
  7.     }
  8. ```

  1. ``` html
  2.     <slick settings="slickConfig">
  3.      ...
  4.     </slick>
  5.     <button ng-click="toggleSlick()">Toggle</button>
  6. ```

Method


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

  1. ``` js
  2.     $scope.slickConfig = {
  3.         method: {}
  4.     }
  5. ```

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

  1. ``` html
  2. <button ng-click="slickConfig.method.slickGoTo(2)">slickGoTo(2)</button>
  3. <button ng-click="slickConfig.method.slickPrev()">slickPrev()</button>
  4. <button ng-click="slickConfig.method.slickNext()">slickNext()</button>
  5. <button ng-click='slickConfig.method.slickAdd("<div>New</div>")'slickAdd()</button>
  6. <button ng-click='slickConfig.method.slickRemove(3)'>slickRemove(3)</button>
  7. <button ng-click='slickConfig.method.slickPlay()'>slickPlay()</button>
  8. <button ng-click='slickConfig.method.slickPause()'>slickPause()</button>
  9. ```

Slide data


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

controller:

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

  7.         //number update

  9.         $scope.numberLoaded = true; // enable slick
  10.     };
  11. ```

html:

  1. ``` html
  2.     <script type="text/ng-template" id="tpl.html">
  3.         <h3>{{ i.label }}</h3>
  4.     </script>
  6.     <slick ng-if="numberLoaded">
  7.         <div ng-repeat="i in number">
  8.             <div class="" ng-include="'tpl.html'"></div>
  9.         </div>
  10.     </slick>
  11. ```

Global config


  1. ``` js
  2.   config(['slickCarouselConfig', function (slickCarouselConfig) {
  3.       slickCarouselConfig.dots = true;
  4.       slickCarouselConfig.autoplay = false;
  5.   }])
  6. ```

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:

  1. ``` js
  2.     $scope.currentIndex = 0;
  3.     $scope.slickConfig = {
  4.         event: {
  5.             afterChange: function (event, slick, currentSlide, nextSlide) {
  6.               $scope.currentIndex = currentSlide; // save current index each time
  7.             }
  8.             init: function (event, slick) {
  9.               slick.slickGoTo($scope.currentIndex); // slide to correct index when init
  10.             }
  11.         }
  12.     };
  13. ```

Examples


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

  1. ``` shell
  2. grunt serve
  3. ```

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

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

Creator


@devmark