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

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

用法使用 bower 来安装它。 bower 安装 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 插件用作 angular 指令。它可以在您的 HTML 中指定为属性或元素。

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

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

属性和事件设置：可选对象，包含任何灵活的选项。在这里咨询。

enabled 应该启用或不启用 slick。默认为真。下面的例子方法可选，包含 slick 方法。下面详细讨论事件可选包含光滑事件

$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 可以通过使用启用的设置标志轻松打开和关闭。

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

slick slider creating last slide empty Angular JS?

javascript

php

jquery

angularjs

slick.js