jQuery carousel in a div with display:none
- by Fred Kafka
I have to use on my site a jQuery responsive carousel with 4 displayed items that slide one at a time, etc etc. The point is: this carousel is placed in a div with display:none and it appears clicking on a button with a slideToggle script (jQuery). Well, when the div appears the carousel is not displayed. Nothing! Notice that if I remove the display:none the carousel shows perfectly. I've tried a bunch of carousel plugin (bxslider, caroufredsel, elastislide, flexslider) and this issue happens for all of them. And then... I'm going crazy!!
Excuse meSorry friends, here is the code:
HTML (here is the case of FlexSlider but the code is similar for the other plugins)
<div id="hiddenDiv">
<div id="hiddenDivInner">
<div class="flexslider">
<ul class="slides">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
CSS
#hiddenDiv{
display:none;
padding-bottom:10px;
background: url("../img/xxx.gif") repeat left bottom #FFFFFF;
}
SCRIPT (copy-paste from the site. This script is between $(document).ready together with other scripts. Alredy tried to remove the load function)
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 300,
itemMargin: 5,
minItems: 1,
maxItems: 4
});
});
$("#trigger").click(function () {
$("#hiddenDiv").slideToggle(400, "easeInOutExpo");
});
I remind you that with this code and no display:none every carousels work, also if I slide up and then down the div using the slideToggle button (#trigger).
