Slideshow Image 1 Slideshow Image 2 Slideshow Image 3 Slideshow Image 4 Slideshow Image 5
<div id="slideshow" class="pics">
<img src="jqueryslideshow/image1.jpg" alt="Slideshow Image 1" width="525" height="350" />
<img src="jqueryslideshow/image2.jpg" alt="Slideshow Image 2" width="525" height="350" />
<img src="jqueryslideshow/image3.jpg" alt="Slideshow Image 3" width="525" height="350" />
<img src="jqueryslideshow/image4.jpg" alt="Slideshow Image 4" width="525" height="350" />
<a href=""><img src="jqueryslideshow/image5.jpg" alt="Slideshow Image 5" width="525" height="350" /></a>
Paste this code to the Body HTML
Jquery Cycle
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<style type="text/css">
.pics { height: 382px; width: 557px; padding:0; margin:0; overflow: hidden }
.pics img { height: 350px; width: 525px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
-moz-border-radius: 10px; -webkit-border-radius: 10px;


<script type="text/javascript">
fx: 'fade',
timeout: 2000,
speed: 2000,
autostop: 1,

Paste this code to the Header HTML of the same HTML box above
Download these files and unzip them. Now add a folder to your site named js and add the two js files to it.
Adjust the timeout and speed to your liking
Back to
Add your images to a folder in VSD. I called mine jqueryslideshow