title: jQuery.slides() is not working
body: <p>I'm using the <a href="http://slidesjs.com/" rel="nofollow">SlidesJS</a> jQuery plugin and calling</p>
  
  <pre><code>jQuery.slides();
  </code></pre>
  
  <p>However, this is not working correctly. Instead, the images are just all being displayed (as you would expect without the plugin).</p>
  
  <p>Why isn't this working and how can I get this to work?</p>
  
  <p>I'm certain the javascript is being ran as I have placed <code>alert()</code> above and below my slides() statement to test.</p>
  
  <p>Here is my markup:</p>
  
  <pre><code>&lt;div class="slides"&gt;
      &lt;div class="slides_container"&gt;
          &lt;div&gt;
              &lt;img src="Images/sample_banner.png" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="http://placehold.it/984x111" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="http://placehold.it/984x111/ff0000" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
   &lt;div class="left_arrow"&gt;&lt;a href="#"&gt;&lt;img src="Images/left_arrow.png" alt="left arrow control" /&gt;&lt;/a&gt;&lt;/div&gt;
   &lt;div class="right_arrow"&gt;&lt;a href="#"&gt;&lt;img src="Images/right_arrow.png" alt="right arrow control" /&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.banner
  {
      width:984px;
      border-left:solid 7px #FFFFFF;
      border-right: solid 7px #FFFFFF;    
      z-index:1;
      position:relative;
  }
  
      .banner .slides
      {
      }
          .banner .slides .slides_container {
              width:984px;
              height:111px;
          }
              .banner .slides .slides_container div
              {
                  width:984px;
                  height:111px;
                  display:block;
              }
  
  
  .left_arrow
  {
      position:absolute;
      z-index:2;
      width:25px;
      left:0px;
      top:38px;
  
  }
  
  .right_arrow
  {
      position:absolute;
      z-index:3;
      width:25px;
      left:960px;
      top:38px;
  }
  </code></pre>
  
  <p>Here is my JS:</p>
  
  <pre><code>$(document).ready(function () {
          $('.slides').slides({
             next: 'right_arrow'
             , prev: 'left_arrow'
             , pagination: false
           });
      });
  </code></pre>