CSS Codes
CSS Layouts

<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<style type="text/css">

#myreel{ /*sample CSS for demo*/
border:15px solid black;
}

.paginate{
width: 330px;
margin-top:5px;
font:bold 14px Arial;
text-align:center;
}

</style>

<script src="reelslideshow.js" type="text/javascript">

/***********************************************
* Continuous Reel Slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script type="text/javascript">

var firstreel=new reelslideshow({
wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg"], //["image_path", "optional_link", "optional_target"]
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
orientation: "h", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 300 //transition duration (milliseconds)
})

</script>
</head>

<body>

<div id="myreel"></div>

<div class="paginate">
&#8804; <a href="javascript:firstreel.navigate('back')" style="margin-right:200px;">back</a> <a href="javascript:firstreel.navigate('forth')">forth</a> &#8805;
</div>

</body>