JQuery Cycle plugin not working as I expected

I am trying to get a scrolling gallery implemented on my new website. I am using the Cycle plugin. When I have the plugin set to "fade" or "shuffle" effects and a couple of others work fine, but when I try to use my desired effect (scrollLeft or scrollHorz), do my images disappear? I don't get it, I believe it might have something to do with my CSS. Can anyone see if there is anything I missed?


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

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



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

    fx: 'scrollLeft',
    pause: 1,



        <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>



source to share

3 answers

Apart from this comma we looked at in the comments, chrome #slide

doesn't calculate the container height , but your slider works fine. All you have to do is add height to this container and your slider works just fine, e.g .:

#slides {
  height: 243px;




Your float: left seems to be related to the div. You can create li tags as floats. Check this slider



is as follows:

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


shoud be:





All Articles