The following setup is buggy since the carousel stops working after fading one or two items. It's not a CSS display/z-index issue but the carousel will simply stop swapping classes without throwing any errors.
$('#carousel').owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
animateOut: 'fadeOut'
});
The issue seems to lie in the combination of items: 1 / autoplayTimeout / animateOut.
Side by side with two similar, working examples in a fiddle: if you either omit autoplayTimeout or animateOut or set items to anything higher than 1 it works (although not quite as expected with animateOut and items > 1 tbh).
try this, you will surprise with the different 馃槃
$('#carousel').owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
animationOut: 'fadeOut'
});
Then there's no fading animation, animateOut is the correct setting according to the docs.
Any updates on this? I've just installed the latest version via NPM and I'm getting exactly the same issue. Can confirm also that simply removing the animateIn/Out options removes the issue for me too.
Most helpful comment
Any updates on this? I've just installed the latest version via NPM and I'm getting exactly the same issue. Can confirm also that simply removing the animateIn/Out options removes the issue for me too.