<div id="slider_back">
<div id="slider_container">
<!--LEFT AND RIGHT NAVIGATIONS-->
<div id="navl" style="display: block; "> <a class="nleft" href="#" onclick="return false;"> </a> </div>
<div id="navr" style="display: none; "> <a class="nright" href="#" onclick="return false;"> </a> </div>
<!--LEFT AND RIGHT NAVIGATIONS-->
<div class="image_reel" style="width: 2984px; left: -2238px; ">
<div class="each_image"><a href="/an option link"><img src="/image_path" alt="#"></a> </div>
<div class="each_image"><a href="/ an option link "><img src="/ image_path" alt="#"></a> </div>
<div class="each_image"><a href="/ an option link "><img src="/ image_path" alt="#"></a> </div>
<div class="each_image"><a href="/ an option link "><img src="/ image_path" alt="#"></a> </div>
</div>
<!--close image_reel -->
</div>
<!--close slider container -->
</div>

// JavaScript Document
//function becomes active on DOM ready.
jQuery(document).ready(function() {
//the width of each image
var imageWidth = jQuery(".each_image").width();
//how many images in our slider
var howMany = jQuery(".image_reel img").size();
//the whole images stack put one next to each other will be:
var imageReelWidth = imageWidth * howMany;
//assign that width to the image reel div:
jQuery(".image_reel").css({'width' : imageReelWidth});
//as the first image on the left will be shown from the start we hide the left navigation:
jQuery('#navr').show(); jQuery('#navl').hide();
//When the user clicks the right navigation button:
jQuery('.nright').click (function () {
//we establish the current left position in pixels for the whole image reel
var current = jQuery('.image_reel').css("left");
//if we have reached the end we return false
if (parseInt(current) <= (parseInt(imageReelWidth) - parseInt(imageWidth))*-1) { return false; }
//else we go animate the slideshow for one more image
else {
var an = parseInt(current) - (imageWidth);
jQuery('.image_reel').delay(100).animate({left: an}, "slow", function() { jQuery(this).clearQueue(); } );
}
//we should also hide/show the navigation buttons when we reach the end or not
if (parseInt(current) <= (parseInt(imageReelWidth) - (parseInt(imageWidth)*2))*-1) { jQuery('#navr').hide(); jQuery('#navl').show(); }
else { jQuery('#navr').show(); jQuery('#navl').show(); }
});
 
// same process for clicking the left navigation only difference is that the end of the slide is actually at position 0
jQuery('.nleft').click (function () {
var current = jQuery('.image_reel').css("left");
if (parseInt(current) >= 0) { return false; }
else {
var an = parseInt(current) + (imageWidth);
jQuery('.image_reel').delay(100).animate({left: an}, "slow", function() { jQuery(this).clearQueue(); });
}
if (parseInt(current) >= (0 - parseInt(imageWidth))) { jQuery('#navr').show(); jQuery('#navl').hide(); }
else { jQuery('#navr').show(); jQuery('#navl').show(); }
});
});