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).