I'm using the SlidesJS jQuery plugin and calling
jQuery.slides();
However, this is not working correctly. Instead, the images are just all being displayed (as you would expect without the plugin).
Why isn't this working and how can I get this to work?
I'm certain the javascript is being ran as I have placed alert()
above and below my slides() statement to test.
Here is my markup:
<div class="slides">
<div class="slides_container">
<div>
<img src="Images/sample_banner.png" />
</div>
<div>
<img src="http://placehold.it/984x111" />
</div>
<div>
<img src="http://placehold.it/984x111/ff0000" />
</div>
</div>
</div>
<div class="left_arrow"><a href="#"><img src="Images/left_arrow.png" alt="left arrow control" /></a></div>
<div class="right_arrow"><a href="#"><img src="Images/right_arrow.png" alt="right arrow control" /></a></div>
Here is my CSS:
.banner
{
width:984px;
border-left:solid 7px #FFFFFF;
border-right: solid 7px #FFFFFF;
z-index:1;
position:relative;
}
.banner .slides
{
}
.banner .slides .slides_container {
width:984px;
height:111px;
}
.banner .slides .slides_container div
{
width:984px;
height:111px;
display:block;
}
.left_arrow
{
position:absolute;
z-index:2;
width:25px;
left:0px;
top:38px;
}
.right_arrow
{
position:absolute;
z-index:3;
width:25px;
left:960px;
top:38px;
}
Here is my JS:
$(document).ready(function () {
$('.slides').slides({
next: 'right_arrow'
, prev: 'left_arrow'
, pagination: false
});
});
Even though your question is basically solved. Then there were some other problems with the layout.
<div class="banner" />
?And there were more of small issues, that I fixed, made the code optimal and dry.
My example: http://jsfiddle.net/hobobne/RSncf/1/