Open langman66 opened 9 years ago
Did you find a solution for your problem? I'm currently facing the same problem, but whith ng-mouseenter and ng-mouseleave.
Unfortunately we were not able to solve this so I had to use a totally different design approach.
I have bumped into exactly the same issue. Everything has been working great until we hit responsive break. Is there any work-around? Image will need to be clickable with access to angular scope.
Someone put an answer on stack overflow for a traditional jquery fix.
You can see the response here.
Since I am using foundation 5, I finally end-up using three different
It looks like the issue is with how slick handles checking the responsive breakpoints. I notice that Slick.prototype.destroy() gets called which replaces the elements HTML with the compiled slides, thus losing any context of the angular scope.
A possible solution could be to let angular-slick take care of the breakpoint checking on window.resize and re-init slick when needed?
Any news on this issue?
Stuck on the same thing here.
I think it's a core feature that needs to be fixed before deciding to use this plugin. So we need to share ideas to fix it angular way.
Check my answer for Angular use-case: http://stackoverflow.com/questions/29101254/angularjs-slick-js-carousel-ng-click-not-firing-with-responsive-attribute-settin/30584787#30584787
@amrfaisal Your workaround fixed it for scenario when resizing the window. But in my case ng-click events are not triggered on mobile at all. Is there any workaround for this. Thanks!
@amrfaisal Doing it on setPosition
fixes my issue, check https://github.com/vasyabigi/angular-slick/pull/100.
"angular-slick" binds the "onInit" event actually after initializing "Slick", and this is totally wrong. Based on this: https://github.com/kenwheeler/slick/issues/1005. Events binding should be done before initializing "Slick". So to fix it, you should edit the library it-self "angular-slick" and move events binding before slick initialization.
I think angular-slick has gone inactive, judging by the huge backlog of PRs. But you can fix this problem with amrfaisal's solution on StackOverflow, and by simply making a copy of the library, and moving the two event-handlers. Inside of the 'intializeSlick' function, find slider.on('init', ...
and slider.on('afterChange', ...
, and move them up above the call to slider.slick({...})
.
I downgraded and it worked.
Downgrade slick-carousel to version 1.3.15 and work without touch nothing
I have a ng-click on my individual slides that will take users to a different page when clicked. I also have the responsive attribute setup following the example application. I used the example application bundled with angular-slick as a baseline.
When my view first loads, everything works correctly. I can click the hyperlink and receive the click event. However, if I change the size of the browser window that triggers one of the breakpoint settings, then the ng-click events no longer gets fired.
Does anyone know how to work around this issue or to allow the angular framework to re-watch for the ng-click events?
I have a plnkr here that demonstrates the issue. Just run the plnkr, then resize the browser or the panel. I think the slick.js library is doing a destroy and recreation of the html and angular does not have a chance to re-apply its watch for the ng-click events.
http://plnkr.co/edit/FCeE8AejXsjxWh6WR1wd
My View:
{{ i }}
Click HereCurrent index: {{ index }}
```