jCarousellite не отображается в IE 6/7/8, отлично в Safari / FF / Chrome

Question

Я пытаюсь реализовать слайд-шоу, подобное этому: http://biggayicecreamtruck.com, но я не могу понять, почему их код работает, а мой - нет. Моя страница здесь: http://oaxacankitchenmobile.com. Дело не в том, что IE не разрабатывает его, изображения просто не отображаются вообще. Как я уже сказал, слайд-шоу отлично работает в FF / Safari / Chrome. Вот мой код на главной странице

<div id="slideshow">
    <ul>
            <li><img title="Picture 1" alt="Picture 1" src="images/slideshow1.jpg" />
                <div class="text-bg"></div>
                <div class="text">
                    <h2>La Flor de Pi&ntilde;a</h2>
                </div>
            </li>
            <li><img title="Picture 2" alt="Picture 2" src="images/slideshow2.jpg" />
                <div class="text-bg"></div>
                <div class="text">
                    <h2>Agua Frescas</h2>
                </div>
            </li>
                            ...and so on...

Я не думаю, что в том, как я перечисляю изображения, есть что-то не так, поскольку он точно такой же, как и на другом сайте. JQuery загружается нормально, так как он работает в других браузерах. Я предполагаю, что я снова правильно инициализирую код, так как он работает в других браузерах. Код jCarousellite, который я использую, точно такой же, как и на другом сайте.

Я думаю, что моя проблема связана с моим CSS, но я застрял там. Я не могу понять, что мне нужно изменить, чтобы показ слайдов вообще появлялся в IE. Может кто-нибудь мне помочь? Вот соответствующий CSS:

/*SLIDESHOW*/
#slideshow                          { width: 900px; height: 350px; border: 1px solid #362626; display: none; margin: 0 auto 28px; }
    #slideshow ul                   { list-style-type: none; margin: 0; }
    #slideshow img                  { width: 900px; height: 350px; }
    #slideshow li                   { width: 900px; height: 350px; position: relative; }
    #slideshow .text-bg             { position: absolute; bottom: 0; left: 0; width: 900px; height: 58px; background-color: #000; }
    #slideshow .text                { position: absolute; bottom: 18px; left: 18px; width: 900px; text-align: left; }
    #slideshow h2                   { display: inline; font-size: 18px; line-height: 24px; color: white; font-family: "Baskerville Old Face", serif; }
    #slideshow h2 a:hover           { text-decoration: none; }
    #slideshow p                    { display: inline; font-size: 13px; margin-left: 7px; }

Еще одно обстоятельство добавляет мое разочарование: мои вызовы jQuery .load также не работают на этой странице. Итак, похоже, что на этой странице не работают скрипты jQuery.

Answer 1

Проблема, возможно проблема в строке 75 в /js/okm.js:

$('#slideshow').jCarouselLite({
    visible: 1,
    speed: 800,             
    auto: 4000,
    vertical: false,
    pauseOnHover: true, //<---
});

Удалите лишнюю запятую - она ломает IE :

pauseOnHover: true

Answer 2

Если вы находите это изображение интригующим, я бы предложил перейти к http://www.enterprisedojo.com/2010/12/19/beware-the-trailing-comma-of-death/, где оно было первоначально размещено:)