Geht wählen! Am 26. September 2021 ist Bundestagswahl in Deutschland, wählt Annalena Baerbock für zukunftssichere Klima-, Digital- und Sozialpolitik.. Mehr infos zum Wahlprogramm auf gruene.de 🗳💚🌻

Pure JavaScript slider

Written by Kevin Gimbel on , 🍿 5 min. read

The great thing when you're a beginner in any programming language (or in anything in general) is, that even small successes make you happy and proud of what you did. I'm very proud of my back to top script even though it's not perfect at all. I could make a back to top button with jQuery in a few minutes but it wouldn't be that much fun. However, I made another JavaScript thing I'm proud of: A pure JavaScript slider.

See the Pen BxflH by Kevin (@kevingimbel) on CodePen.

The slider runs forever in a loop, animating images to the left until the last image is reached. When the last image is reached it will animate all back to the first image (I'm not happy with this animation yet) and will start over. Pretty simple. The hardest part for me was - and still is - the animation timing. I'm may over-thinking stuff but I can't figure out a formula to calculate a good timing based on how many images the slider has. If someone has an idea, fork the pen or tweet me.

First of all I defined some variables.

     // current image is 0
var current = 0,
// used for loops
i,
// the whole slider element
slider = document.querySelector('[data-js="sslide"]'),
// all images inside the slider
allImages = slider.querySelectorAll('img'),
// the width of 1 image based on all images (used in % later)
imgWidth = Math.ceil(100 / allImages.length),
// the slider width based on the number of images
sliderWidth = allImages.length * 100;

Next I set the width of all images as well as the slider.

    
slider.style.width = sliderWidth + '%';

for(i = 0; i <= allImages.length - 1; i++) {
allImages[i].style.width = imgWidth + '%';
}

Now the slider and images have the correct width (in percent) and I began to make the animation part. It's made with the setInterval JavaScript function.

    function animateLeft(cur) {
var i = 0,
time = 50;
var animate = setInterval(function() {
if(i <= imgWidth) {
allImages[cur].style.marginLeft = "-" + i + "%";
i++;
} else {
clearInterval(animate);
}
}, time);
}

The interval runs as long as i is smaller or equal to the image width. Because the interval is set to 50ms it runs "fast" and sets the images margin-left rapidly to -i% and because it runs as long as i is smaller than the image width it hides the image completely to the left. Pretty simple right? However, time is at the moment a variable that is set to 50 because I couldn't figure out a good way to calculate it.

Another function I use is animateRight that is just the opposite of animateLeft. It is only used to animate all images back to the start and has the same markup as animateLeft expect it runs revers (i--). I combine it with a reset function that also resets the current variable to 0.

  function animateRight(cur) {
var i = imgWidth,
time = 50;
var animate = setInterval(function() {
if(i <= sliderWidth) {
allImages[cur].style.marginLeft = "-" + i + "%";
i--;
} else {
clearInterval(animate);
}
}, time);
}

function reset() {
for(i = 0; i <= allImages.length - 1; i++) {
animateRight(i);
}
// resseting the current image to the first image
current = 0;
}

That's all the functions I needed for this slider - I could've combined the animateLeft and animateRight function and if I continue developing this slider I'll make it. Last thing to do: Call a final interval that handles the sliding of all images.

    setInterval(function () {
if(current <= allImages.length - 2) {
animateLeft(current);
current++;

} else {
reset();
}
}, 3000);

Hi, I'm Kevin!

I'm a DevOps Engineer with a focus on automation and security. Before shifting into DevOps and cloud computing I worked as Front-End Developer, which is still a hobby and field of interest for me.

Hand-made vector avatar of Kevin Gimbel

I'm very passionated about a variety of games - digital, boardgames, and pen & paper; and also interested in Sci-Fi, Cyberpunk, and dystopian books. You can find out more on the about page.