Placowdepuss Placowdepuss - 5 months ago 9
Javascript Question

Why is the JQuery Cycle Plugin broken in this application?

I've played around with the JQuery Cycle plugin for the first time and tried making a straightforward image slideshow. For the most part, I've followed this gentleman's tutorial. I ended up with this code:

<head>
<style> @import "main.css"; </style>
<script type="text/javascript" src="jquery-3.0.0.min.js"> </script>
<script type="text/javascript" src="jquery.cycle.all.js"> </script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'slow',
next: '#next',
prev: '#prev'
});
</script>
</head>
<body>

<div id="picwrap">
<div id="piccont">

<div id="prev" class="controller"> </div>
<div id="slider">
<img src="pic1.png" />
<img src="pic2.png" />
<img src="pic3.png" />
</div>
<div id="next" class="controller"> </div>

</div>
</div>

</body>


The relevant CSS is the following:

picwrap {
display: block;
height: 560px;
width: 580px;
margin: auto;
}

#piccont {
display: block;
float: left;
height: 560px;
width: 580px;
overflow: auto;
}

#prev {
background-image: url(arrow-left.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
height: 560px;
width: 100px;
float: left;
position: relative;
z-index: 99;
}

#next {
background-image: url(arrow-right.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
height: 560px;
width: 100px;
float: right;
position: relative;
z-index: 99;
}

#slider {
display: block;
height: 560px;
width: 580px;
float: left;
position: absolute;
overflow: hidden;
}


The script does not seem to be working whatsoever. I can only assume that I've made a slight error that I'm struggling to notice. I've cross-referenced with the video multiple times, and checked the path and file names. I've also looked
at other tutorials and could not find what I've done wrong. It seems that the implementation of the plugin has just failed altogether, because there seems to be no difference in the file before and after adding the scripts. I get a static image (pic1) with the two arrows (which are unclickable) on top of it.

Any help would be greatly appreciated.

Answer

It seems your CSS is incorrect. At the first line it says 'picWrap' but it should be '#picWrap' if i'm correct. Most of the time when Cycle isn't producing errors but still doesn't work, it's in the CSS.

Also, place your JS at the bottom (before closing body tag) and change your JS to this:

$(document).ready(function(){
    $('#slider').cycle({
        fx:     'scrollHorz',
        speed:  'slow',
        next:   '#next',
        prev:   '#prev'
    });
});

Cycle needs the images to be loaded before it can calculate the size of the different slides. Sometime I even choose to use $(window).load instead of $(document).ready. Window load gets executed after the images completely loading.

Comments