javascript - slick slider creating last slide empty Angular JS?

Answer

Solution:

Usage Using bower to install it. bower install angular-slick-carousel Add jquery, angular, slick-carousel and angular-slick-carousel to your code.

<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> 
Copy code

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

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

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

 <slick infinite=true slides-to-show=3 slides-to-scroll=3>
    ...
    </slick>

    <slick 
        settings="slickConfig" ng-if="numberLoaded">
    </slick>
Copy code

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) {
        }
    }
};
Copy code

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
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:
    $scope.slickConfig = {
        method: {}
    }
Copy code

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>
Copy code

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;
  }])
Copy code

https://www.npmjs.com/package/angular-slick-carousel