Question

Basically, I have no experience with Javascript whatsoever.

I have to make a very simple image slider but I can’t get it to show the next image automatically.

var currentItem = $('#project-list li').first();

function showNextSlide()
{
    if(currentItem.length == 0){
        currentItem = $('#project-list li').first();
    }

    console.log(currentItem);
    currentItem.css('display', 'none');
    currentItem = currentItem.next();
    currentItem.css('display', 'block');
}

My images are loaded like this

<ul class="project-list" id="project-list">
    <li class="project current slide-1">
        <img src="http://lorempixel.com/600/300/animals/1" />
    </li>
    <li class="project slide-2">
        <img src="http://lorempixel.com/600/300/animals/2" />
    </li>
    <li class="project slide-3">
        <img src="http://lorempixel.com/600/300/animals/3" />
    </li>
    <li class="project slide-4">
        <img src="http://lorempixel.com/600/300/animals/4" />
    </li>
</ul>

Appreciate any help!

Answer 1

If you want to have automatic slide, you can easily use, setInterval() method :

setInterval(function(){
    showNextSlide(); 
}, 2000);