Slick-cloned doesn't seem to have access to updated scope

[Ponjimon]

Hello,

I'm currently stuck having this issue. I have a centered slick-slider with infinite set to true. Now I want to do special CSS-animations with the slider items on the left and on the right of the centered one.

It appears that the bind is broken in the element before the "first" centered one. Let's say I have 5 elements. The centered one is element with index 0. Then the bind of element with index 4 is broken. For example, I have {{myBind}} in the template of that element. If I update $scope.myBind now, it won't be updated in the template aswell.

Does anyone know why?

[fdiep]

+1

I seem to have the same issue. I have an angular directive in a div inside my slick slides. They all work fine with the exception of the two slick-cloned slides. It seems that when the html is cloned it is not compiled by angular.

[devmark]

using ng-if?

https://github.com/devmark/angular-slick-carousel#slide-data

[Ponjimon]

We cannot reInit the slider because we have video tags in them.

[fdiep]

I am not sure if you have the same issue I do but this allowed me to temporarily fix my problem. This will $compile the cloned slides. I have this in the module('app').run

slickCarouselConfig.event.init = function(event) {
      var $clonedSlides = ng.element(event.currentTarget).find('.slick-cloned');
      if ($clonedSlides.length > 0) {
        // iterrate through slides and compile with angular
        _.each($clonedSlides, function(slide) {
          // get slide content and scope
          var $slide = ng.element(slide);
          var $scope = $slide.scope();
          // compile html and digest
          $compile($slide)($scope);
          $rootScope.$digest();
        });
      }
    };

[Ponjimon]

Unfortunately, we don't want to recompile each slider. That would be bad performance for us.

[thomas-lee]

I want to know too, is it possible to add extra at the end when updating the data.

Although it sounds contradict to the angular life cycle, it gives better user experience and also allow me to perform infinite scroll.

[madmaxlax]

I think I am having this issue as well, and annoyingly it's not consistent (ie on my local dev env it seems to compile the newly added elements fine, automatically. but on staging/live, it sometimes misses the cloned elements and doesn't compile the new elements, which are custom directives. trying work with $compile workaround

[bansalsonam22]

I am also facing similar issue i am having some button on my content if i click one button, i am adding selected class on it. but if i am scrolling cloned version of same item is not having selected class on it. Scope value is not reflecting. on cloned slides. @devmark

[xhoskin]

+1

[tonister]

+1

I tried the solution that @fdiep suggested, but this just gives a completely weird solution. It creates inside each of the '.slide-clone' the full range of ng-repeat items except each of the items is named same.

Check this codepen out: https://codepen.io/tonister/pen/WZBQyz.

[RaghulR7]

+1

I need to implement a circular carousel with three slides displayed at a time. I am using angularjs slick carousel with centerMode and infinity as true for achieving circular carousel. And i want to apply css class on clicking the slide to show which slide is selected at the moment.

But I am facing issue while selecting a a cloned slide. (i.e) Initially, if i try to click on slide1 or slide2 it gets selected. But when i try to click on slide6(cloned slide), it is not applying the css property instead it is applying the css to the original slide6 which is not displayed at the moment.

Please check out the jsfiddle below:

https://jsfiddle.net/eq2gtgy6/4/

Please suggest me on what can be done to apply css on cloned slides. Thanks