Simple Slideshow jQuery/UI images inline

Question

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

<div id="slides">
    <div class="slides_container">
        <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="960" height="392" alt="Slide 1" class="slide"  id="firstSlide">
        <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="960" height="392" alt="Slide 2" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="960" height="392" alt="Slide 3" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="960" height="392" alt="Slide 4" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="960" height="392" alt="Slide 5" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="960" height="392" alt="Slide 6" class="slide" style="display:none;">
    </div>
</div>​

CSS:

.slide{
    width:960px;
    height:392px;
    display:inline;
    float:left;
}​

JS:

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();​

The Fiddle: http://jsfiddle.net/xYWzU/6/

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.

Solution 1

Not sure if this is what you want, but adding:

position: absolute;

Will solve your problem.

Here is the JSFiddle.

Solution 2

For future reference (or if you want to change your slideshow now), here's a great jQuery plugin called "Cycle" that's perfect for making slideshows!

It's easy to set up and you don't have to do so much CSS ;)