search

devmark / angular-slick-carousel

Angular directive for slick-carousel
http://devmark.github.io/angular-slick-carousel/
MIT License
353 stars 125 forks source link

Slide data update requires $timeout #137

Open kx-emeka opened 6 years ago

kx-emeka commented 6 years ago

After slide data is changed, using the method specified in your documentation, most times the view is still being updated when slick is initialized (when ng-if is set to true from false). The view still contains the old data and it causes slick to hold on to the previous data while adding new data, especially with ng-repeat.

I can see that you delayed the slick init using $timeout in your example implementation. You need to mention this in your documentation or change the directive to include a $timeout before initialization.

screenshot_2

Keep up the good work!

fantaishao commented 6 years ago

This will casue the page blinking.How did you solve it?

teacoat commented 5 years ago

This will casue the page blinking.How did you solve it?

The page blink seems to be because of the rapid change in the elements height, I think disabling it is causing the images to all stack for a moment then go back to being absolute.

To get around this you can set a fixed height on the container and have overflow hidden, or perhaps hide all of the slides between the enable/disable. Whatever fits the context of what you are doing I guess!

LoyalPotato commented 2 years ago

For anyone that comes here in the future, what I did to fix the blink was add a transition in the opacity so that it doesn't just blink, but rather makes a small fade in and out so it doesn't look as bad. I added the animation using ng-enter and ng-leave, mentioned in the animations portion of the angularjs dev guide. Hope it helps someone :)