Jquery Cycle plug-in is not working as I expected

Question

I am trying to get a scrolling gallery implemented on my new website. I am using the Cycle plug-in. When I have the plug in set to effects "fade" or "shuffle" and a couple others it works fine but when I try to use my desired effect (scrollLeft or scrollHorz) my images disappear? I do not understand, I believe it may have something to do with my CSS. Could somebody have a look to see if there is anything I have 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-->

Which version of the plugin are you including? The full version or the lite version? — Andres I Perez, Mar 22 '12 at 23:17
Did you also include the latest version of jQuery before the cycle script? — Andres I Perez, Mar 22 '12 at 23:27
My document states "Jquery v1.7.2", is that the latest? I can't seem to find anything newer. — Dale, Mar 22 '12 at 23:29
That is the latest version, yes, but is it included before the cycle script? Just tested your code and it works fine, aside from a small error that is on your javascript that prevents it from working in IE but should work regardless on other browsers (its this `pause: 1,` remove that extra comma) i dont see why its not working. Are you including the jQuery script before the cycle script? — Andres I Perez, Mar 22 '12 at 23:34
Could you make it clearer what you mean by "including the jQuery script before the cycle script?" My head section looks like: Bear in mind that my cycle works when I use different effects the only effects that seem to not be working are the scroll effects.. My mind is blown. — Dale, Mar 22 '12 at 23:39
Your setup looks good, the jQuery script has to come before the cycle script, this is a tough question to answer since we can't see your full setup. One last thing we can check is what version of the cycle script you're including. The cycle lite script comes with a limited set of transition effects so that might be it, check if it has this note on the header of the script when you open it `jQuery Cycle Lite Plugin`. — Andres I Perez, Mar 22 '12 at 23:46
I have the full version, I tried the lite and not much difference was made. When using the lite version, it displays my image but does not add the effect. The image just remains static. Using the full version, my images completely disappear. — Dale, Mar 23 '12 at 00:07
Check out this demo, your code works fine for me: http://jsfiddle.net/vcwzx/ — Andres I Perez, Mar 23 '12 at 00:09
A strange thing just happened.. After testing in IE with the comma removed, my code works! BUT!>> Still in chrome, my code does not work? The images are still missing. I have created a separate document for testing containing only the slider. Just tested on mozilla firefox and again my code is working. Yet chrome still refuses to work. — Dale, Mar 23 '12 at 00:15
Can you post a link to your page or your full html so we can take a look? The fiddle i made works fine in all browsers with your code, http://jsfiddle.net/vcwzx/show/. — Andres I Perez, Mar 23 '12 at 00:25
http://dcdezine.co.uk/dignans/index.html Please keep in mind it's a work in progress. Works in IE & Firefox, but not chrome. (Please ignore the glitch in my navbar on IE, that's another bug entirely that I am wrestling with lol) — Dale, Mar 23 '12 at 00:33
posted my answer below, for some reason Chrome was not computing a height on your slider container but if you add it it works fine. Tested in FF10 and Chrome 18. — Andres I Perez, Mar 23 '12 at 00:48

score 3 · Accepted Answer · answered Mar 23 '12 at 00:47

3

Aside from that comma error that we went over on the comments,in chrome the height of the #slide container is not getting computed but your slider is working just fine. All you have to do is add a height to that container and your slider works just fine, like so:

#slides {
  height: 243px;
}

answered Mar 23 '12 at 00:47

Andres I Perez

75,075
21
157
138

Fantastic! Thank you very much. It's strange chrome did not compute my slider height. Learn something new every day :P thanks! – Dale Mar 23 '12 at 00:51
Im glad, i knew it had to be something funky! btw, if the answer was satisfactory please remember to check the green checkmark next to the answer to give the question some closure. – Andres I Perez Mar 23 '12 at 00:53

score 0 · Answer 2 · answered Apr 05 '12 at 13:31

0

is that:

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

shoud be:

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

answered Apr 05 '12 at 13:31

Йордан Стоичков

1

score 0 · Answer 3 · answered Mar 23 '12 at 00:16

0

It seems that your float:left is related with div. You can make li tags as floated. Check This slider

answered Mar 23 '12 at 00:16

Huseyin

1,499
2
25
39

That div is floated left as the slider sits beside another div on my site. After a bit of testing on my test document it didn't fix the slider :( – Dale Mar 23 '12 at 00:26
Please use firebug for detecting of your real UL place. It may be becase you have hide() or similar code in cycle() or you forgot determining of #slides width. Also please check position: absolute; z-index: 6; for #slides – Huseyin Mar 23 '12 at 00:35

Jquery Cycle plug-in is not working as I expected

3 Answers3