Clever Geek Handbook

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?

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


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;
}
+3


source


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



0


source


is as follows:

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

shoud be:

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


source






More articles:


All Articles