How Do I Auto Play My Slideshow

I'm really new to everything from Javascript to HTML. Literally not good at it yet, just copying some code from the net and using it as my project. not really hosting it or anythin

Solution 1:

All you need to do is call the click event on your .next class that is currently visible. To do this automatically you would use JavaScript, for example, place this in a setInterval() that activates every 5 seconds:

setInterval(function(){
    $(".next:visible").click();
}, 5000);

Note This uses jQuery, there is a equivalent for visible in pure JS, but is a bit messy.

Fiddle Example

Solution 2:

Also you you can do it without jQuery, and you can stop and resume autoplay on hover, as in my example:

carousel.js

var interval;

fnAutoSlide();

document.getElementById("element_slides").onmouseover = function () {
    clearInterval(interval);
}

document.getElementById("element_slides").onmouseout = function() {
    fnAutoSlide();
}

function fnAutoSlide() {
    interval = setInterval(
    function()
    {
        var nextSlideClick = document.getElementsByClassName('next'), i;

        for (var i = 0; i < nextSlideClick.length; i ++) {
        if (window.getComputedStyle(nextSlideClick[i], null).display != "none") {
                nextSlideClick[i].click();
                break;
            }
        }
    }, 4000);
}

• don't forget to set your ul class "slides" an id: "element_slides".