javascript - slick slider creating last slide empty Angular JS?

652

Can users please explain why they are downvote this question?

Facing a problem in a slick slider that it creating an empty slide at last below is my code that is written in Angular JS. How can I deactivate or remove that empty slide?

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

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> 

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

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

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>

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

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

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>

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

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

People are also looking for solutions to the problem: php - Doctrine sets valid parameters to null on flush()

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.