Slideshow-Images not displaying in the right place on the screen

Question

I am trying to use the SlideShow widget for the first time. I have a pretty basic slideshow with six images that I want to display. When I preview it in IE or Firefox,what I get is really weird. The first image displays in the right place.  The second displays in the right place, but with a black box underneath it. The third displays under where it's supposed to go, with a black box above it. After this, the images alternate between where they're supposed to be and just below that, with a black box of the same size in the second location. I've looked at the source of other webpages that have working slide shows, and I don't see a difference between what I'm doing and what they're doing. Here is what I think is the relevant code. Can anyone suggest a way to fix this?
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-81003-5']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</style>
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #ImageSlideShow */
#ImageSlideShow {
width: 426px;
height: 303px;
border: solid 1px #000000;
background-color: #717c96;
#ImageSlideShow .ISSClip {
background-color: #000000;
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2141543" binding="#ImageSlideShow" />
</oa:widgets>
-->
<div class="column2">
<div id="thumb">
<div>
<ul id="ImageSlideShow" title="">
    <li><a href="images/balloon1a.jpg"><img src="images/baloon1a.jpg" alt="" /></a></li>
    <li><a href="images/balloon2a.jpg"><img src="images/baloon2a.jpg" alt="" /></a></li>
    <li><a href="images/balloon3a.jpg"><img src="images/baloon3a.jpg" alt="" /></a></li>
    <li><a href="images/balloon4a.jpg"><img src="images/baloon4a.jpg" alt="" /></a></li>
    <li><a href="images/balloon5a.jpg"><img src="images/baloon5a.jpg" alt="" /></a></li>
    <li><a href="images/balloon6a.jpg"><img src="images/baloon6a.jpg" alt="" /></a></li>
</ul>
                                                      <script type="text/javascript">
// BeginOAWidget_Instance_2141543: #ImageSlideShow
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
widgetID: "ImageSlideShow",
injectionType: "replace",
autoPlay: true,
displayInterval: 8000,
transitionDuration: 2000,
componentOrder: ["view"]
// EndOAWidget_Instance_2141543
                                                      </script>
<h3 align="center"><br />A Different Way of Thinking</h3></div>
</div>
</div>

Answer 1

If you have a look at basic_fs.css, you will notice that the styles taget a class called BasicSlideShowFS.
Yet when I look at the constructor, the class is missing as in
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
    widgetID: "ImageSlideShow",
    widgetClass: "BasicSlideShowFS",
    injectionType: "replace",
    autoPlay: true,
Because you are not using the thumbnails (filmstrip), I am wondering why you did not implement the basic slideshow, which will make it a lot easier for you.
Gramps