I need to do a JavaScript slideshow, but it must auto slide, have a next and previous button, a play/pause button and a button to change the layout(Not too sure what this means). I've only got the previous and next function figured out but not the auto slide, play/pause and the change layout.

Here is the HTML

Here is the JavaScript

var timer;

var slider_img = document.querySelector('.slider-img');

var images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg', 'img6.jpg', 'img7.jpg', 'img8.jpg', 'img9.jpg', 'img10.jpg'];

var i = 0; //Current Image index

function images(args) {

};

(function slideshow() {

})();

function prev() {

if (i

i--;

return setImg();

}

function next() {

if (i >= images.length - 1) i = -1;

i++;

return setImg();

}

function play() {

}

function pause() {

}

function changeLayout() {

}

function setImg() {

return slider_img.setAttribute('src', 'IMG/' + images[i]);

}

And the css

.slider {

margin: 50px auto;

width: 50%;

}

.img-box {

width: 400px;

}

.btn {

border: none;

outline: none;

background-color: #888;

padding: 10px 30px;

font-size: 20px;

color: beige;

cursor: pointer;

margin: 10px auto;

}

.btn:hover {

background-color: black;

}