jCarouselLite not setting width and left values on div

jCarouselLite not setting width and left values on div. Also, in firebug the div and ul are greyed out although the div has:

visibility: visible;

Incidently, the width and height attr开发者_运维问答ibutes on the ul and subsequent li's are set to 0. Shouldn't jCarouselLite be setting those?

Images are being loaded in the DOM - but not displaying.

This was being caused by a CSS rule that was setting the containing <div> to display:none.

Once I removed it, the plugin calculated the values correctly.

But what to do when the elements in your page need to be hiden at start?

I used the following trick to start the page with the elements present so that the plugin is able to calcule its position but outiside the screen so that the used does not see it.

<script type="text/javascript"> 
    $('#myElement').animate({left: '-=5000px'}, 0);
</script>

that trick also solves the drawing problems with the jquery google maps plugins.

Maybe my problem lies in the fact that I do not call my code at the right time or the right place... anyway, thanks to that good old trick, it's finally working.

I initially had the container element set to "display: none" and I used jQuery's slideToggle function to show the hidden element. In the slideToggle function call I just put the jCarouselLite call. This is how I called it and it worked ok:

$("#Gallery").slideToggle("slow", function () {
    if (!carouselLoaded) {
        $(".carousel").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            circular: true,
            visible: 1
        });
        carouselLoaded = true;
    }
});

The boolean flag is used to block the jCarouselLite from loading again once the container got re-hidden and re-shown.

In jquery.jcarousellite.js file modify
div.css(sizeCss, divSize+"px"); to div.css(sizeCss, "100%");
or any pixel you want to hard set.
Besides , you can set number item you want to show by config visible: 5
Ex:

        <script type="text/javascript">
            $(function() {
                $(".auto .carousel").jCarouselLite({
                    auto: 1000,
                    speed: 4000,
                    visible: 5

                });
            });
        </script>