>

Multiple Jquery Slideshows on the same page with different speeds
<script type="text/javascript" src="js/jquery1.2.6.min.js"></script>
<script src="js/jquery.slideshow.js"></script>>
<style>
.slideshow-1, .slideshow-2, .slideshow-3, .slideshow-4{ position: relative; }
.slideshow-1 li, .slideshow-2 li, .slideshow-3 li, .slideshow-4 li { position: absolute; left: 0; top: 0; width: 525px; height: 350px; display: none; list-style: none; }
</style>

<script>
document.documentElement.className += 'js';
</script>

<script>
$(function() {
$('.slideshow-1').slideshow({ timeout: 2000, speed: 1000 });
$('.slideshow-2').slideshow({ timeout: 3000, speed: 2000 });
$('.slideshow-3').slideshow({ timeout: 4000, speed: 3000 });
$('.slideshow-4').slideshow({ timeout: 5000, speed: 4000 });
});

</script>
Paste this code to the Head area of your page
Add your images to VSD using the add files tool. (Ctrl + alt + f) You can add them to the root or as I do to a folder called slideshow.
Step 1
Step 2
<ul class="slideshow-1">
<li><img src="slideshow/rino.jpg" alt=""></li>
<li><img src="slideshow/hippo.jpg" alt=""></li>
<li><img src="slideshow/giraff.jpg" alt=""></li>
<li><img src="slideshow/parrot.jpg" alt=""></li>
</ul>
Paste this code to the Body HTML of the HTML box.
Step 4
Step 5
Place a another HTML box on your page and paste this code to the Body HTML
<ul class="slideshow-2">
<li><img src="slideshow/lion.jpg" alt=""></li>
<li><img src="slideshow/monkey.jpg" alt=""></li>
<li><img src="slideshow/camel.jpg" alt=""></li>
<li><img src="slideshow/dolphin.jpg" alt=""></li>
</ul>
Adjust the image src to your actual images
Adjust the image src to your actual images
Download these two files then unzip them and add them to a folder named js on your site.
Step 3
jquery1.2.6.min.js
jquery.slideshow.js
Now preview to check results and then publish
Step 6
Place a another HTML box on your page and paste this code to the Body HTML
<ul class="slideshow-3">
<li><img src="slideshow/image1.jpg" alt=""></li>
<li><img src="slideshow/mage2.jpg" alt=""></li>
<li><img src="slideshow/image3.jpg" alt=""></li>
<li><img src="slideshow/image4.jpg" alt=""></li>
<li><img src="slideshow/image5.jpg" alt=""></li>
<li><img src="slideshow/image6.jpg" alt=""></li>
</ul>
Adjust the image src to your actual images
Step 7
Place a another HTML box on your page and paste this code to the Body HTML
<ul class="slideshow-4">
<li><img src="slideshow/image7.jpg" alt=""></li>
<li><img src="slideshow/image8.jpg" alt=""></li>
<li><img src="slideshow/image9.jpg" alt=""></li>
<li><img src="slideshow/image10.jpg" alt=""></li>
</ul>
Adjust the image src to your actual images
Here you can adjust the speed of each slide show.