search

vasyabigi / angular-slick

Angular directive for slick-carousel
http://vasyabigi.github.io/angular-slick/
MIT License
500 stars 237 forks source link

ng-repeat with limit filter breaks carousel if limit changes. #8

Open ichabodcole opened 10 years ago

ichabodcole commented 10 years ago

I have an ng-repeat inside of a slick carousel with a limitTo filter applied. The idea is the user will be able to click a button on the last slide to show more slides which sets the filter limit to a higher value, however changing the limit results in the carousel breaking and showing a vertical list of results instead of the carousel. This occurs whether the limit is raised or lowered.

Any work around for this? Is there a way to force the carousel to reinitialize?

esgy commented 10 years ago

Something similar happens when the source changes also:

slick(infinite="false", lazy-load='ondemand', slides-to-show=8, slides-to-scroll=4, dots="true", init-onload="true", data="MODEL.selectedPortfolio.images")
  div(ng-repeat="img in MODEL.selectedPortfolio.images")

When I add more images to the images array the slider breaks and it list vertically.

esgy commented 10 years ago

It seems this issue is because when the source changes on the scope and the slider is reinitialized some div containers are not reinserted as the original rendering.

slick-issue1

.slick-list and .slick-track are missing

slick-issue1-1

Any ideas how to fix this one?

skusunam commented 10 years ago

Any work around to fix this issue?

ichabodcole commented 10 years ago

Well, in my case I actually ended up switching to "angular-carousel".

esgy commented 10 years ago

I created my own directive using slickAdd method to add the slides. Check the gist here: https://gist.github.com/esgy/815a7b064d5cfdd5c36f