I have a script that displays images sort of like a carousel. The images are placed in LIs and the left positioning is changed based on the width of each slide (all the same). Currently, the old slide just disappears then the new one appears.

I would like to make it so they slide in from the side and was wondering if someone could give me a basic example of how to do this using plain JavaScript (no jQuery!).

For example, I'm using the following code to update the left positioning of the containing UL. How can I make it so it will slide the selected image to the left or to the right (depending upon whether the next or previous button is clicked)

containingUL.style.left = '-' + (slideNumber * slideWidth) + 'px';

I have a script that displays images sort of like a carousel. The images are placed in LIs and the left positioning is changed based on the width of each slide (all the same). Currently, the old slide just disappears then the new one appears.

I would like to make it so they slide in from the side and was wondering if someone could give me a basic example of how to do this using plain JavaScript (no jQuery!).

For example, I'm using the following code to update the left positioning of the containing UL. How can I make it so it will slide the selected image to the left or to the right (depending upon whether the next or previous button is clicked)

containingUL.style.left = '-' + (slideNumber * slideWidth) + 'px';

• javascript
• animation
• slideshow
• slide

• Just curious... why the aversion to JQuery? – Techgration Commented May 2, 2011 at 16:15
• Out of interest, why no jQuery? – Rich Bradshaw Commented May 2, 2011 at 16:19
• The client is against using it. I know it's totally ridiculous, but there's no way around it. :( – Cofey Commented May 2, 2011 at 16:29
• These two might be of interest: dhtmlkitchen./ape/example/anim and cinsoft/mylib-examples.html#transform. Both are modular and avoid the bloat of jQuery. The latter has been heavily tested in older versions of IE and runs quite well. – user1385191 Commented May 2, 2011 at 17:07

2 Answers 2

Here's a basic element slide function. You can play with the values of steps and timer to get the animation speed and smoothness just right.

function slideTo(el, left) {
    var steps = 25;
    var timer = 25;
    var elLeft = parseInt(el.style.left) || 0;
    var diff = left - elLeft;
    var stepSize = diff / steps;
    console.log(stepSize, ", ", steps);

    function step() {
        elLeft += stepSize;
        el.style.left = elLeft + "px";
        if (--steps) {
            setTimeout(step, timer);
        }
    }
    step();
}

So you could go:

slideTo(containingUL, -slideNumber * slideWidth);

Edit: Forgot to link to the JSFiddle

Edit: To slide to the left, provide a left value less than the current style.left. To slide to the right, provide a value greater than the current style.left. For you it shouldn't matter much. You should be able to plug it into your existing code. I'm guessing your current code either increments or decrements slideNumber and then sets style.left according to the slideNumber. Something like this should work:

if (nextButtonClicked) slideNumber++;
else slideNumber--;
slideTo(containingUL, -slideNumber * slideWidth);

I updated the JSFiddle with a working example of a sliding "gallery", including prev and next buttons. http://jsfiddle/gilly3/EuzAK/2/

Simple, non jQuery:

http://sandbox.scriptiny./contentslider/slider.html http://www.webmonkey./2010/02/make_a_javascript_slideshow/ http://javascript.internet./miscellaneous/basic-slideshow.html