Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slide data update requires $timeout #137

Open
kx-emeka opened this issue Oct 11, 2017 · 3 comments
Open

Slide data update requires $timeout #137

kx-emeka opened this issue Oct 11, 2017 · 3 comments

Comments

@kx-emeka
Copy link

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
Copy link

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

@teacoat
Copy link

teacoat commented Nov 4, 2018

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
Copy link

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants