Slick Carousel with Angular JS

Question

I am using Slick carousel in one of my AngularJS application. For that I have created directive as follows:

  myApp.directive('slickSlider',function(){
   return {
     restrict: 'A',
     link: function(scope,element,attrs) {
       $(element).slick(scope.$eval(attrs.slickSlider));
   }
  }
 });

Here is my code in view file:

  <div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
    </div>

In this case it is working fine and initializing properly.

But when I creates slides dynamically using ngRepeat, it is not initializing and shows slides one after the other.

Here is my code using ngRepeat

<div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
      <div class="my-slide" ng-repeat="slide in slides">
         <a><img ng-src="assets/img/{{slide.img}}"/></a>
       </div>
 </div>

Any suggestion, how can I resolve it?

**Note** there is an AnguarJS plugin [ui-carousel](https://github.com/mihnsen/ui-carousel) that does a slick carousel without jQuery. — georgeawg, Jun 11 '18 at 19:18

score 20 · Accepted Answer · answered Jul 02 '14 at 05:27

20

I suspect that the slick plugin may need the DOM to be fully rendered to work properly.

Try:

myApp.directive('slickSlider',function($timeout){
 return {
   restrict: 'A',
   link: function(scope,element,attrs) {
     $timeout(function() {
         $(element).slick(scope.$eval(attrs.slickSlider));
     });
   }
 }
});

answered Jul 02 '14 at 05:27

Michael Kang

52,003
16
103
135

Just wanted to confirm, if we don't specify delay parameter in $timeout function, does that ensure that it will execute after DOM is loaded? – Kalpesh Patel Jul 02 '14 at 07:23
Yes, execution of the function is deferred until after the render phase. – Michael Kang Jul 02 '14 at 07:42
4

If you look at the source code for $timeout, it calls $browser.defer underneath. The defer method will enqueue execution until after DOM is rendered. Unfortunately, this fact is not documented too well. You can find an interesting discussion about it here from the Angular team: https://github.com/angular/angular.js/issues/734. . – Michael Kang Jul 02 '14 at 08:09
Buddy.. take the angular implementation... https://github.com/vasyabigi/angular-slick – YaswanthJg Jan 18 '16 at 13:16

score 11 · Answer 2 · edited May 23 '17 at 12:25

$timeout still didn't give the data enough time to initialise for my scenario so I modified the directive a bit more to watch for the data to have content (this could also have the effect of rebinding whenever the data changes, not just once the DOM initializes onLoad, if you change the use of isInitialized):

app.directive('slickSlider', function () {
    return {
        restrict: 'A',
        scope: {'data': '='},
        link: function (scope, element, attrs) {
            var isInitialized = false;
            scope.$watch('data', function(newVal, oldVal) {
                if (newVal.length > 0 && !isInitialized) {
                    $(element).slick(scope.$eval(attrs.slickSlider));
                    isInitialized = true;
                }
            });
        }
    }
});

This way angularJS watches for the data to be loaded and only hooks up the slick when data has length.

(btw $watch is necessary, instead of $observe, because "data" attribute doesn't use interpolation ( "{{...}}" ): Take a look at this great answer if you want to get the low-down on this.)

usage:

<div class="clearfix" data="slides" 
    slick-slider="{dots: false,
                   arrows: true,
                   draggable: false,
                   slidesToShow:3,
                   infinite:false}">
    <div class="my-slide" ng-repeat="slide in slides">
        <a><img ng-src="assets/img/{{slide.img}}"/></a>
    </div>
</div>

thanks to this so answer and this github that I got to from this so question

this works fine, but it throws an error, saying "newVal is undefined. any idea why? — mshahbazm, Apr 10 '16 at 06:47
@mshahbazm this is quite an old answer and I didn't end up using this but I can only guess you either have a typo in your declaration of the scope.$watch function or data isn't hooked up correctly. Is the new value param definitely "newVal" and have you added valid "data" to your html declaration? — lukkea, Apr 10 '16 at 13:07
thanks for reply, I wrapped it inside a condition " if (newVal) " and it worked fine for me. — mshahbazm, Apr 10 '16 at 18:15

Slick Carousel with Angular JS

2 Answers2

Linked

Related