Comments (13)
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.
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.
Related Issues (20)
- slick execution in ng-repeat HOT 2
- Unslick failure
- Can't swipe back with swipe to slide HOT 1
- Slide when number of slide is less than or equal to slides-to-show HOT 2
- Using boolean('false') always returns true HOT 1
- useCSS property does not work
- Bug doesnt display anything until autoplay begins HOT 1
- slides to scroll setting is not working in last page
- As-nav-for is not working with touch.
- Dragging makes my list disappear HOT 3
- angular slick carousel does not respect viewBox of the ng-md-icon
- ng-click on mobile dont work HOT 1
- Can't disable draggable property
- how to ban cycle?
- how to init current-index
- Cannot read property 'add' of null
- slider.unslick is not a function
- Dragend triggers click
- Passing Slick as dependency with ng-route does not load it HOT 2
- $ is not a function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-slick.