If the slick carousel is hidden, when it's shown, it's displayed incorrectly about angular-slick HOT 13 OPEN

I am having a similar issue, did you happen to find a solution?

from angular-slick.

Hi! For future reference (since the issue is still open), you can solve it with the following code:

<div ng-controller="TestController as testCtrl">
    <div ng-show="showSlick = testCtrl.mustShowCarousel()">
        <slick init-onload="false" data="showSlick" dots="true" infinite="false" speed="300" slides-to-show="1" touch-move="false">
            <div>Content 1</div>
            <div>Content 2</div>
            <div>Content 3</div>
        </slick>
    </div>
    <input type="button" ng-click="testCtrl.toggleCarouselVisibility()" value="Toggle!" />
</div>

That way, the slick is initialized once the showSlick variable is set to true (and not before, since in that case the slick is initialized with a width of 0px)

PS: I also had the same issue with ui-router, with a slick in a child view (ui-sref), and solved it the same way.

https://plnkr.co/D27HZa

from angular-slick.

I tracked down our issue to another directive altering the width of the window, so in our case it was not an issue with your directive. thanks.

from angular-slick.

Whas there any solution found for this issue? Is it consider a issue?

from angular-slick.

I've found no solution. What i'm doing is programatically do a click so
that it will show correctly, but during a brief moment, the problem is
visible.

$('.slick-dots .slick-active button').click();

2014-08-04 20:32 GMT+02:00 dlaberge [email protected]:

Whas there any solution found for this issue? Is it consider a issue?

—
Reply to this email directly or view it on GitHub
#6 (comment)
.

from angular-slick.

Hi, I have the same issue. Any idea?

from angular-slick.

See here for more info: kenwheeler/slick#187

from angular-slick.

I have the same issue, the thing is when I show the slick, this doesn't display the images inside the ng-repeat div, I found some code but it doesn't work, only works if i use it in the browser console, you should try it angular.element('#sliderId').get(0).slick.setPosition();
angular.element('#sliderId').slick('setPosition');

How I said before, this code only works for me at the browser console, when I use it after the angular.element('#new-report').show( "slow" ); it doesn't works

from angular-slick.

i solved in this way (coffeescript)

angular.element('#new-report').show( "slow",()->
angular.element('#slider-report').get(0).slick.setPosition();
);

from angular-slick.

Hi! Nice solution Damien ;)
Little update for ui-router and slick carousel users!
If you still have trouble displaying slick carousel correctly within a child view/state of ui-router and the data is loaded via HTTP request inside your controller, simply use the route's resolve data so that you are sure that the data is loaded before the associated controller and template.

https://github.com/angular-ui/ui-router/wiki#resolve

from angular-slick.

@darrachequesne: Thanks for the solution. It's working fine for me.

from angular-slick.

I encountered a same issue.The problem is when we use ng-show.So instead of ng-show just use ng-if and it will work just fine.

from angular-slick.

I was facing the same issue. I was using a collapsible list from MaterializeCss and given that the content is not displayed (none) the slick-list width and height was '0' when any element was activated.
I found this work-arround,
Applied a directive to initialize the collapsible and use the default callbacks to watch when a list is activated, then, setting an id to the slick directive, i use the "setPosistion" argument directly to the slick instance of the directive.

 .directive('collapsible',function () {
      return {
        restrict:'C',
        link:function (scope,elem,attrs) {
          jQuery(elem).collapsible({
            accordion: false,
            onOpen: function(el) {
              console.log(el[0].id);
              switch(el[0].id){
                case "images-collapsible":
                  jQuery('#images-slick').slick('setPosition');
                  break;
                case "videos-collapsible":
                  jQuery('#videos-slick').slick('setPosition');
                  break;

              }
              console.log(scope);
            }, // Callback for Collapsible open
            onClose: function(el) { console.log(el); } // Callback for Collapsible close
          });
        }
      }
    })

Works fine with tabs too. Hope to help someone.

from angular-slick.