IOSSlider - unable to see slider scroll bar
<p>I am unable to see the scroll bar when using iosslider. Here is my jqeury. The image I want to use for the background image is in my images folder just under the root folder and has the name detailed. Here is the javascript code:</p>

<pre><code>// JavaScript Document
$(document).ready(function() {

/* basic - default settings */
$('.iosSlider').iosSlider();

/* some custom settings */
$('.iosSlider').iosSlider({
    snapToChildren: true,
    scrollbar: true,
    scrollbarHide: false,
    desktopClickDrag: true,
    scrollbarLocation: 'bottom',
    scrollbarHeight: '6px',
    scrollbarBackground: 'url(images/slider_nav.png) repeat 0 0',
    scrollbarBorder: '1px solid #000',
    scrollbarMargin: '0 30px 16px 30px',
    scrollbarOpacity: '0.75',
    onSlideChange: changeSlideIdentifier
});

});
</code></pre>

<p>Here is my html for the slider:</p>

<pre><code>&lt;div id="homeBar1"&gt;
    &lt;div id="homeBarInner1"&gt;
    &lt;div class = 'iosSlider'&gt;

&lt;!-- slider --&gt;
&lt;div class = 'slider'&gt;

    &lt;!-- slides --&gt;
    &lt;div class = 'slide'&gt;&lt;a href="drug-delivery-automation/drug-delivery-   automation.php"&gt;Drug  Delivery Automation&lt;br /&gt;
      &lt;img src="images/h_drug.jpg" width="170" height="120" /&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class = 'slide'&gt;&lt;a href="laboratory-automation/laboratory-  automation.php"&gt;Laboratory Automation&lt;br /&gt;
      &lt;img src="images/h_labauto.jpg" width="170" height="120" /&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class = 'slide'&gt;&lt;a href="special-applications/special-  applications.php"&gt;Special Applications&lt;br /&gt;
      &lt;img src="images/h_specialaps.jpg" width="170" height="120" /&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;div class = 'slide'&gt;&lt;a href="special-applications/special-  applications.php"&gt;Special Applications&lt;br /&gt;
      &lt;img src="images/h_specialaps.jpg" width="170" height="120" /&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class = 'slide'&gt;&lt;a href="laboratory-automation/laboratory- automation.php"&gt;Laboratory Automation&lt;br /&gt;
      &lt;img src="images/h_labauto.jpg" width="170" height="120" /&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class = 'slide'&gt;&lt;a href="special-applications/special-applications.php"&gt;Special Applications&lt;br /&gt;
</code></pre>

<p></p>

<p>and here is my css:</p>

<pre><code>#homeBar1 {
width: 930px;
height:280px;
margin: 20px 0;
text-align:center;}

#homeBarInner1 {
margin: 0 15px;
width:920px;
padding-top:10px;}

/* slider container */
.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;

/* optional */
width: 930px;
height: 180px;
}

 /* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}

/* slide */
.iosSlider .slider .slide {
/* required */
float: left;

/* optional */
width: 170px;
height: 120px;
}
</code></pre>

<p>I would greatly appreciate any help anyone can give me. Thanks. Seamus</p>
