I am using jQuery Cycle for a slideshow on this page: http://www.orientalhealthsolutions.com/
The images in the center of the page should rotate. However, they are not.
Here is the HTML:
<div class="slideshow">
<img src="{site_url}/photos/slideshow-1.jpg" alt="slideshow-1" width="600" height="410" />
<img src="{site_url}/photos/slideshow-2.jpg" alt="slideshow-2" width="600" height="410" />
<img src="{site_url}/photos/slideshow-3.jpg" alt="slideshow-2" width="600" height="410" />
<img src="{site_url}/photos/slideshow-4.jpg" alt="slideshow-2" width="600" height="410" />
<img src="{site_url}/photos/slideshow-5.jpg" alt="slideshow-2" width="600" height="410" />
<img src="{site_url}/photos/slideshow-6.jpg" alt="slideshow-2" width="600" height="410" />
<img src="{site_url}/photos/slideshow-7.jpg" alt="slideshow-2" width="600" height="410" />
</div>
Here is the jQuery:
<script type="text/javascript" src="{site_url}scripts/jquery.cycle.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 4000,
autostop: 1
});
});
</script>
I tried using FireBug, the scripts are loading, but something is still missing and I would appreciate some help sorting it out.
Thanks!