Плагин Jquery Cycle не работает, как я ожидал

Question

Я пытаюсь внедрить галерею прокрутки на моем новом сайте. Я использую плагин Cycle. Когда у меня есть плагин, настроенный на эффекты "fade" или "shuffle" и пару других, он работает нормально, но когда я пытаюсь использовать желаемый эффект (scrollLeft или scrollHorz), мои изображения исчезают? Я не понимаю, я считаю, что это может иметь какое-то отношение к моему CSS. Может ли кто-нибудь взглянуть, есть ли что-то, что я пропустил?

CSS:

    div#slideshow {
width: 666px; height: 243px;
overflow: hidden;
position: relative; z-index: 5;
margin:15px 0 0 0;
float:left;
    }

div#slideshow ul#slides {
    list-style: none;
}
    div#slideshow ul#slides li {
        margin:0;
    }

Javascript:

        $(document).ready(function() {
        $("#slideshow").css("overflow", "hidden");

        $("ul#slides").cycle({
    fx: 'scrollLeft',
    pause: 1,
        });
        });

HTML:

        <div id="slideshow"><!--SLIDER-->
        <ul id="slides">
        <li><img src="images/sliderchorizosoup.jpg" alt="Chorizo Soup" /></li>
        <li><img src="images/sliderlamblegsteak.jpg" alt="Lamb Leg Steak" /></li>
        <li><img src="images/sliderdessert.jpg" alt="Dessert" /></li>
    </ul>
       </div><!--SLIDER-->

Answer 1

Помимо той ошибки с запятой, которую мы указали в комментариях, в chrome высота контейнера #slide не вычисляется, но ваш слайдер работает просто отлично.Все, что вам нужно сделать, это добавить высоту к этому контейнеру, и ваш слайдер будет работать нормально, например:

#slides {
  height: 243px;
}

Answer 2

таково:

$("#slideshow").css("overflow", "hidden");

должно быть:

$("#slideshow").css("overflow":"hidden");

Answer 3

Кажется, что ваш float: left связан с div.Вы можете сделать теги li как плавающие. Проверить этот слайдер