jCarousel inside a Sliding a Div Container

jCarousel inside a Sliding a Div Container

Hi All,

I am still fairly new to jQuery so please excuse me if this is a really basic question.

In a site I am currently developing, I have a jCarousel which is wrapped in a Div Container that uses jQuery to slide up and down using "slideToggle".

The page renders fine and the Sliding Div works well however, the jCarousel does not work correctly. The "li" items are not being floated left so I just end up with a list of images rather than each one floating next to each other.

If remove the "display: none;" in the CSS for the Sliding Div container:
/* Sliding Panel CSS */
a:focus {
   outline: none;
}
#pnlCarouselSide {
    background-color:#00387D;
   height: 240px;
   width:  601px;
   display: none;
   margin:auto;
}
.slide
{
    width: 601px;
   margin: auto;
   padding: 0;
   border-top: solid 4px Black;
   background: url(../Images/SlidingImages/btn-slide.gif) no-repeat center top;
}
.btn-slide {
   background: url(../Images/SlidingImages/white-arrow.gif) no-repeat right -50px;
   text-align: center;
   width: 144px;
   height: 31px;
   padding: 10px 10px 0 0;
   margin: 0 auto;
   display: block;
   font: bold 120%/100% Arial, Helvetica, sans-serif;
   color: #fff;
   text-decoration: none;
}
.active {
   background-position: right 12px;
}


The jCarousel renders correctly and I can see all the images correctly next to each other, however, I need the container to be hidden "closed" when the page first loads.

JavaScript for jCarousel & Sliding Div
<script type="text/javascript">

    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel();
    });

</script>

<script type="text/javascript">
    $(document).ready(function() {

        $(".btn-slide").click(function() {
            $("#pnlCarouselSide").slideToggle("slow");
            $(this).toggleClass("active"); return false;

        });
    });
</script>


HTML:
        <div id="pnlCarouselSide">
            <div id="Carousel">
                 <ul id="mycarousel" class="jcarousel-skin-tango">
                    <li><img src="~/Images/Image1.png" width="75" height="75" alt="" /></li>
                    <li><img src="~/Images/Image2.png" width="75" height="75" alt="" /></li>
                    <li><img src="~/Images/Image3.png" width="75" height="75" alt="" /></li>
                    <li><img src="~/Images/Image4.png" width="75" height="75" alt="" /></li>
                    <li><img src="~/Images/Image5.png" width="75" height="75" alt="" /></li>
                    <li><img src="~/Images/Image6.png" width="75" height="75" alt="" /></li>
                 </ul>
               </div>
        </div>

        <p class="slide"><a href="#" class="btn-slide">New Images</a></p>


If you require any further information please let me know.

Thanks