How To Get Minimal Jquery Slideshow To Slide Properly?

Trying to make this minimal jQuery slideshow (Simple jQuery slideshow using animate()), but how do I make the 3rd and 4th image slide 'together' like in the 1st and 2nd image? http

Solution 1:

I have changed your code quite a bit: JSFidle

First of all, you should do prevItem.css("right", prevItem.width()); instead of prevItem.css("left", -prevItem.width());. And CSS should be changed like this: .slideshow img:first-child { right: 0px; }

I have also changed the animation to circularly repeat. Dunno if you can use it, otherwise here is what you asked for http://jsfiddle.net/eku4Lwt1/56/

Solution 2:

How about this: http://jsfiddle.net/eku4Lwt1/64/

In your JS change this line:

currentItem.css("right", 0);

->

currentItem.css("left", 0);

And in your CSS change the image positioning to left: 200px;:

.slideshowimg {
    position: absolute;
    top: 0;
    left: 200px;
}