Question

用户可以解释一下他们为什么要回答这个问题吗？

面对光滑滑块中的问题，它最后在下面创建一个空幻灯片是我用Angular JS编写的代码。如何停用或删除空白幻灯片？

<slick dots=false infinite=true speed=300 slides-to-show=3 touch-move=false slides-to-scroll=1 init-onload=true data="city_section">
  <div  ng-repeat="city_s in city_section" >
    <img ng-if="city_s.search_city_image" src="<?php echo UPLOAD_PATH ?>city/{{city_s.search_city_image}}" class="img-responsive">
  </div>
</slick>

Answer 1

用法用凉亭安装它。凉亭安装angular-slick-carousel 在代码中添加jquery，angular，slick-carousel和angular-slick-carousel。

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

将可排序模块作为依赖项添加到应用程序模块：slickCarousel

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

该指令允许您使用slick-carousel插件作为角度指令。它可以在HTML中指定为属性或元素。

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

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

属性＆amp;事件 settings：可选包含任何光滑选项的Object。请咨询。

启用

是否应启用浮动。默认为true。以下示例方法可选包含光滑方法。下面详细讨论包含光滑事件的事件可选

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

启用/禁用光滑通过使用启用的设置标志，可以轻松打开和关闭光滑。

    $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: {}
    }

将其作为控制属性的值传递。现在，您可以调用任何插件方法，如示例所示。

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

幻灯片数据对于更改幻灯片内容，您必须设置ng-if以销毁和初始化

控制器：

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

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

光滑的滑块创建最后一张幻灯片空Angular JS？

1 个答案: