To give our users even more control over our image rotator, we're going to add what's called pagination. Pagination allows you to move directly to a specific image in our rotator instead of having to click the next and previous links until we find the image we're looking for. This function is very helpful if we have a large number of images in our image rotator. To add pagination we perform the following steps:
Let's start by adding the following code to image-rotator.css:
#pagination {
position:absolute;
top:10px;
width:100%;
text-align:center;
}
#pagination a {
padding:2px 5px;
color:#000;
background:#FFF;
border-radius:3px;
text-decoration:none;
opacity:0.7;
}
#pagination a:hover {
opacity:1;
cursor:pointer;
}In
image-rotator.html, add the following line directly undervar pause;:var paging = "";
In our HTML, we need to add the following code under
<a id="next" href="#">next</a>:<div id="pagination...