There is a little problem when the carousel contains only pictures and we activate the plugin "autoHeight". The first slide gets a height of 1px.
I've fixed this by adding these lines at the end of "var AutoHeight = function(carousel) {}" :
var refThis = this;
window.onload = function()
{
if (refThis._core.settings.autoHeight) refThis.update();
}
Sorry for the double post...
I've also added this to fit the carousel on window resize :
var intervalId = null;
window.onresize = function()
{
if (refThis._core.settings.autoHeight)
{
if(intervalId != null) clearTimeout(intervalId);
intervalId = setTimeout(function()
{
refThis.update();
}, 250);
}
}
Thanks,
This works for me!
@ganlanyuan I've updated the code by this because the one I've posted above doesn't work with multiple carousels in same page.
this._intervalId = null;
var refThis = this;
$(window).load(function()
{
if (refThis._core.settings.autoHeight) refThis.update();
});
$(window).resize(function()
{
if (refThis._core.settings.autoHeight)
{
if(this._intervalId != null) clearTimeout(this._intervalId);
this._intervalId = setTimeout(function()
{
refThis.update();
}, 250);
}
});
thanks ^
:+1: thanks, man. it works for me too
Was looking for this. Very nice. :ok_hand:
Does this require me to edit the source files? That's bad since I'm using Owl Carousel as a bower dependency. Any chance this would work in my main.js ?
Yes ;-)
If you want, you can download my updated file here : http://www.redsky.be/assets/website/owlcarousel/rs-owl.carousel.js (be careful this is not the latest version ;-))
Thanks for the help :-) Do you know if it's possible to inject this code inside my ordinary JavaScript code instead? Maybe even where I call the owlCarousel method?
I don't understand what you want to do exactly..?..
I don't want to edit the Owl Carousel core files (hardcode it). I want to include a JavaScript snippet in my own JavaScript-file (or even inline in the HTML) to keep the fix away from the core files. In other words; overwrite it someway. Possible? :)
No, may be I'm wrong but I think it's not possible.
Do the same thing than me, duplicate the original file and rename it.
I know it's not a good idea to update the core, I hope that the author would fix this in the next versions.
@RedskyThirty Thanks for your effort. Anyone else know how to fix this with some JavaScript code I can include elsewhere? I'm using Owl Carousel 2 as a Bower dep and would be utterly happy if I can fix this without hardcoding the source codes.
You can do it yourself onWindowResize but it's a bit tricky because you will probably add a timeout to be sure that your code will be read after (and in addition to) the one of Owl Carousel. I think that it's not a better idea than update the core.
OK. Anyone help, please? :)
I'm sorry, but I have to bump this. Any fix on this, please? :-)
If you cannot resolve this by yourself, may be look at another slider.
I'm also using "JQuery lightslider" which is quite nice after adding some little fixes/features ;-)
Thanks for fast reply. This really grinds my shit, but I had to modify the core bower_components files in order to get this working. Your solution work and I'm very pleased with it, thank you very much, but the author should also update Owl Carousel to work with this auto height fix!
@RedskyThirty thanks for the fix - works perfect. Why the hell hasn't this been fixed by the author yet?
Hey @RedskyThirty - would you have some time to make a pull request with your changes? That would help me check them out more quickly.
Thank you very much for this fix! I broke my head. To the author: please merge!
I've adjusted the proposed changes and committed them to the latest development branch. It will be released with the next release. I'll be closing this issue here, if there is any further evidence that this issue is still persistent feel free to reply to me.
Most helpful comment
Yes ;-)
If you want, you can download my updated file here : http://www.redsky.be/assets/website/owlcarousel/rs-owl.carousel.js (be careful this is not the latest version ;-))