javascript — скользкий слайдер, создающий последний пустой слайд Angular JS?

Question

javascript — скользкий слайдер, создающий последний пустой слайд Angular JS?

Пользователи могут объяснить, почему они понизили этот вопрос?

Столкнувшись с проблемой скользкого слайдера в том, что он, наконец, создает пустой слайд, — это мой код, написанный на 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>

-1

angularjs javascript jquery php slick-slider

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

использование
Используя бауэр, чтобы установить его. Бауэр установить угловой-гладкий-карусель
Добавьте 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>

Атрибуты & Событие
настройки: необязательный объект, содержащий любой из скользких параметров. Проконсультируйтесь здесь.

включено должно быть включено или нет. По умолчанию true. Пример ниже
необязательный метод, содержащий метод 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) {
}
}
};

Включить / отключить пятно
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

1