autoslide

by Julien Etienne

HTML

<div id="slide-show"></div>

CSS

img {
    width: 600px;
    height auto;
}

JavaScript

var speed = 4; //sec

// Your image array
var images = [
    'http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg',
    'https://picsum.photos/id/237/800/400',
    'https://picsum.photos/id/124/800/400'];

// Get the slideShow tag
var slideShow = document.getElementById('slide-show');

// Create the image tag  //You could also just make one in HTML and get the tag
var img = document.createElement('img');

// Append the image to the slideshow container
slideShow.appendChild(img);

// Basic request animation polyfill 
var rAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        return setTimeout(callback, 1000 / 60);
    };

// declare var count outside of rAF loop
var count;

function changeImage(timeStamp) {
    count = Math.floor(timeStamp / 1000 / speed);

    while (count > 2) {
        count -= 3;
    }

    img.src = images[count];

    rAF(changeImage);
}

rAF(changeImage);