title: Simple Slideshow jQuery/UI images inline
body: <p>built a simple slide show for a little project really fast, but I can't get the images to stay inline.
  Here's my code and a fiddle:
  HTML</p>
  
  <pre><code>&lt;div id="slides"&gt;
      &lt;div class="slides_container"&gt;
          &lt;img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="960" height="392" alt="Slide 1" class="slide"  id="firstSlide"&gt;
          &lt;img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="960" height="392" alt="Slide 2" class="slide" style="display:none;"&gt;
          &lt;img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="960" height="392" alt="Slide 3" class="slide" style="display:none;"&gt;
          &lt;img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="960" height="392" alt="Slide 4" class="slide" style="display:none;"&gt;
          &lt;img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="960" height="392" alt="Slide 5" class="slide" style="display:none;"&gt;
          &lt;img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="960" height="392" alt="Slide 6" class="slide" style="display:none;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slide{
      width:960px;
      height:392px;
      display:inline;
      float:left;
  }​
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function slideShow() {
      var displayToggled = false;
      var current1 = $('.slide:visible');
      var nextSlide = current1.next('.slide');
      var hideoptions = {
          "direction": "left",
          "mode": "hide"
      };
      var showoptions = {
          "direction": "right",
          "mode": "show"
      };
      if (current1.is(':last-child')) {
          current1.effect("slide", hideoptions, 1000);
          $("#firstSlide").effect("slide", showoptions, 1000);
      }
      else {
          current1.effect("slide", hideoptions, 1000);
          nextSlide.effect("slide", showoptions, 1000);
      }
  };
  setInterval(slideShow, 3000);
  slideShow();​
  </code></pre>
  
  <p>The Fiddle:
  <a href="http://jsfiddle.net/xYWzU/6/" rel="nofollow">http://jsfiddle.net/xYWzU/6/</a></p>
  
  <p>as you'll notice it works, but when the next image slides over, it slides over underneath the current image, then pops up to the correct position after. Not sure what I'm doing wrong. Any help would be awesome.</p>