jCarouselLite не устанавливает ширину и левые значения на div

Question

jCarouselLite не устанавливает ширину и оставляет значения на div.Кроме того, в firebug div и ul неактивны, хотя у div есть:

visibility: visible;

Кстати, атрибуты width и height в ul и последующих li установлены в 0. Если jCarouselLite не устанавливает эти атрибуты?

Изображения загружаются в DOM, но не отображаются.

Answer 1

Это было вызвано правилом CSS, которое устанавливало содержащее <div> в display:none.

Как только я удалил его, плагин правильно рассчитал значения.

Answer 2

В файле jquery.jcarousellite.js измените
div.css(sizeCss, divSize+"px"); на div.css(sizeCss, "100%");
или любой пиксель, который хотите установить жестко.
Кроме того, вы можете установить номер элемента, который вы хотите показать, с помощью конфигурации visible: 5
Пример:

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

                });
            });
        </script>

Answer 3

У меня изначально был установлен элемент контейнера "display: none", и я использовал функцию slideToggle в jQuery, чтобы показать скрытый элемент. В вызове функции slideToggle я просто поместил вызов jCarouselLite. Вот как я это назвал, и все заработало нормально:

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

Логический флаг используется для блокировки загрузки jCarouselLite снова после повторного скрытия контейнера и его повторного отображения.

Answer 4

Но что делать, когда элементы на вашей странице нужно спрятать при запуске?

Я использовал следующую уловку, чтобы запустить страницу с присутствующими элементами, чтобы плагин мог рассчитать свою позицию, но вне экрана, чтобы использованный не видел его.

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

этот трюк также решает проблемы с рисованием с помощью плагинов jquery google maps.

Может быть, моя проблема заключается в том, что я не вызываю свой код в нужное время или в нужном месте ... в любом случае, благодаря этому старому доброму трюку, он наконец работает.