need similar to "Featured Content Slider" but want navigation to be vertical

you could try

Code:

<!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" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ .slideshow { position:relative;left:25px;top:10px;width:200px;height:150px;border:solid #FF3333 1px; } .img { width:100%;height:100%; } .div { text-Align:center;background-Color:#FFCC66; } .panel { left:0px;width:100%;height:30px;background-Color:#FFFFCC; } .paginate { position:relative;z-Index:10;left:0px;top:10px;width:300px;height:150px; } .item { position:relative;width:100px;height:20px;background-Color:#FFFFCC; } .text { position:absolute;left:50px;top:0px;font-Size:12px; } .default { position:absolute;left:0px;top:0px;width:15px;height:15px;background-Color:#FFFFCC;border:solid #FF3300 1px; cursor:pointer;text-Align:center;font-Size:12px; } .mseover { background-Color:#FFCC66; } .active { background-Color:#FFCC66; } /*]]>*/ </style> <script src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript"></script> <script src="http://www.vicsjavascripts.org.uk/OneStopSlideShow/OneStopSlideShow.js" type="text/javascript"></script> </head> <body> <div class="demo" > <div id="tst1" class="slideshow"> <img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /> <div class="panel" ><a href="#">Panel 1</a></div> <img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" /> <div class="panel" style="background-Color:red;">Panel 2</div> <img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" /> <div class="panel" style="background-Color:green;" >Panel 3</div> <img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" /> <div class="panel" style="background-Color:green;" >Panel 4</div> </div> <div id="Page1" class="paginate" > <div class="item" > <div class="default" ></div><div class="text" >Egypt 5</div> </div> <div class="item" > <div class="default" ></div><div class="text" >Egypt 6</div> </div> <div class="item" > <div class="default" ></div><div class="text" >Egypt 7</div> </div> <div class="item" > <div class="default" ></div><div class="text" >Egypt 8</div> </div> </div> <div class="buttons" > <input type="button" name="" value="Next" onclick="S1.Next(1);" /> <input type="button" name="" value="Prev" onclick="S1.Next(-1);" /> <input type="button" name="" value="Auto" onclick="S1.Auto();"/> <input type="button" name="" value="Pause" onclick="S1.Pause();"/> </div> </div> <script type="text/javascript"> /*<![CDATA[*/ S1=new zxcOneStopSlideShow({ ID:'tst1', // the unique ID name of the images parent node. (string) FramesClassName:'img', // the common class name of the 'fade' frames. (string) Mode:100, //(optional) mode of effect execution(see **** Modes of Execution. (digits, default = 0('opacity')) Duration:1000, //(optional) the duration of the fade effect in milliseconds. (digits, default = 1000) AutoHold:2000, //(optional) the hold duration of automatic changing of images. (digits, default = Duration*2) AutoDirection:1, //(optional) 1 = rotate forward, -1 = rotate back. (digits, default = 1) AutoStart:true, //(optional) true = the images will start auto rotation. (boolean, default = true) Days:0, //(optional) the persistance in days to remember the last frame on initialisation. (digits, default = no persistance) SlidePanels:{ //(optional) an object defining slide in panels options. (object, default = no slide in panels) Mode:'bottom', // mode of effect execution, 'left', 'right' 'top', 'bottom'. (string) ClassName:'panel', // the common class name of the 'panel' elements. (string) SlideIn:'onchange', // the event type to slide the panel in, 'mouseover', 'mouseout' or 'onchange'. (string) SlideOut:'mouseout', // the event type to slide the panel out, 'mouseover', 'mouseout'. (string) Duration:1000, //(optional) the duration of the fade effect in milliseconds. (digits, default = 1000) FadeIn:50 //(optional) true = fade in the panel. (boolean, default = no fade in) }, Paginate:{ //(optional) an object defining pagination options. (object, default = no pagination) ID:'Page1', // the unique ID name of the parent node containing the paginate elements. (string) DefaultClassName:'default', // the default class name of the paginate elements. (string) MouseOverClassName:'mseover', //(optional) the mouseover modifier class name of the paginate elements. (string, default = mouseover class name) ActiveClassName:'active', //(optional) the 'active' modifier class name of the paginate elements. (string, default = active class name) GoToEvent:'mouseup', //(optional) the event type to goto the associated image. (string, default = no goto) HTML:['1','2','3','4'] //(optional) innerHTML of each page element. (array, default = no or existing HTML) }, AddEvents:[ //(optional) an array of arrays defining the events to be added. (array) // where each field is an array: // field 0 = the unique ID name of the element. (string) // field 1 = the function name. (string) // field 2 = the event type. (string) // field 3 = the parameter to pass to the function. (see Script Functions) ['tst1','Auto','mouseout'], ['tst1','Pause','mouseover'] ] }); /*]]>*/ </script></body> </html>

the full application notes can be found at

http://www.vicsjavascripts.org.uk/On...pSlideShow.htm