CODEWITHSUNDEEP
javascripthtml
JustAsking
JustAsking

Reputation: 27

Set correct timer for slideshow

I'm new to this and can't find a way to do it. I have 4 images but can't set a rule that moves changes correctly that slideshow image. Example: 1 - 2 - 3 - 4, if I go from 1 and click to go to 3, timer makes me go to 2 because it was in 1.

onload = start;
function start(){	
    var i = 1;
    function Move(){ 	
        i = (i%4)+1;
        document.getElementById('i'+i).checked = true;
    }
    setInterval(Move,10000);
    }

Upvotes: 1

Views: 42

Answers (1)

Ivan Kashtanov
Ivan Kashtanov

Reputation: 704

You need to keep the current element index out of the start function and change it when you select an element manually:

onload = start;
var currIndex = 1;
function start() {  
    function Move(){    
        currIndex = (currIndex % 4) + 1;
        document.getElementById('i' + currIndex).checked = true;
    }
    setInterval(Move,10000);
}

// better add a class here for simpler selector
document.querySelectorAll('#i1, #i2, #i3, #i4').addEventListener('whatever-event-you-get-on-selection', function() {
    currIndex = yourSelectedId; // use data attributes or something for easier index extraction
});

Upvotes: 1

Related Questions