numbering slideshow

numbering slideshow

I have previous|next on my slideshow at this point. I'm interested in adding a numbering feature in the form of 1/5 using the cycle plugin image count demo example. In the boxes I have made in dreamweaver, do I design representative numbers or leave the boxes blank? Do I make the / in a separate box? I have made a few attempts at making this work, but I am leaving something out it seems. This is what I have at this time.

Thanks in advance

Tim Young


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testpaginationpage1</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#slider').cycle({
fx: 'fade',
timeout: 0,
next:   '#next', 
        prev:   '#prev' 
});
});
</script>
</head>



<style type="text/css">
#slider {
height: 719px;
width: 877px;
position: absolute;
top: 149px;
}
#apDiv1 {
position: absolute;
left: 202px;
top: 63px;
width: 181px;
height: 78px;
z-index: 1;
}
#paginationcontainer {
position: relative;
}
#apDiv2 {
position: absolute;
left: 204px;
top: 67px;
width: 80px;
height: 69px;
z-index: 2;
}
#current {
position: relative;
}
#apDiv3 {
position: absolute;
left: 312px;
top: 67px;
width: 87px;
height: 68px;
z-index: 3;
}
.total {
position: relative;
}
#apDiv4 {
position: absolute;
left: 12px;
top: 62px;
width: 180px;
height: 79px;
z-index: 4;
}
#prevnextcontainer {
position: relative;
}
#apDiv5 {
position: absolute;
left: 14px;
top: 65px;
width: 90px;
height: 71px;
z-index: 5;
}
#prev {
position: relative;
}
#apDiv6 {
position: absolute;
left: 107px;
top: 65px;
width: 82px;
height: 72px;
z-index: 6;
}
#next {
position: relative;
}
#slider {
overflow: hidden;
height: 719px;
width: 877px;
position: absolute;
}
#slider {
height: 719px;
width: 877px;
}
.prev {
}
next {
}
current slide number {
}
total slide number {
}
#apDiv7 {
position: absolute;
left: 287px;
top: 66px;
width: 21px;
height: 75px;
z-index: 7;
}
#backslash {
position: relative;
}
</style>
</head>

<body>
<div id="slider"><img src="mobydick%3A1.jpg" width="877" height="719" /><img src="bravenewworld%3A2.jpg" width="877" height="719" /><img src="lordoffliess%3A3.jpg" width="877" height="719" /></div>
<div id="apDiv1"></div>
<div id="apDiv2">
  <h1 id="current slide no+">&nbsp;</h1>
</div>
<div id="apDiv3">
  <h1 id="+total">&nbsp;</h1>
</div>
<div id="apDiv4"></div>
<div id="apDiv5">
  <h1 id="prev">prev</h1>
</div>
<div id="apDiv6">
  <h1 id="next">next</h1>
</div>
<div id="apDiv7">
  <h1>/</h1>
</div>
</body>
</html>