При удалении элемента массива скрипт начинает работать неправильно?

Question

[Mr_Sergo]

Приветствую всех.
Имеется код:

<div id="slider">
	<img src="" id="one" style="position:absolute;transition:0.4s;">
	<img src="" id="two" style="position:absolute;transition:0.4s;">
</div>

viewImages();

function viewImages(){
	let i = 0, one = document.getElementById("one"), two = document.getElementById("two"), timeout;

	let images = [
		'https://www.artmajeur.com/medias/profile_thumb/d/a/daniilgranin1999/profile/profile_ag4801.jpg#0',
		'https://teinon.net/ficbook/uploads/avatars/avatar_mrs_Axess_1480067710.png#1',
		'https://pp.userapi.com/c638725/v638725839/53e7d/DI0AN0l4KQ8.jpg#2',
		'https://i1.sndcdn.com/artworks-000148070469-smbtji-large.jpg#3'
	];

	one.src = images[0], one.style.opacity = 1;
	two.src = images[1], two.style.opacity = 0;

	changeImg();
	function changeImg(){
	    if(i%2 == 1){
	    	one.style.opacity = 0, two.style.opacity = 1;
		    setTimeout(()=> one.src = images[i], 600);
	    }
	    if(i%2 == 0){
	    	one.style.opacity = 1, two.style.opacity = 0;
	    	setTimeout(()=> two.src = images[i], 600);
	    }
	    i++;
	    i == images.length ? i = 0 : '';
	    timeout = setTimeout(changeImg,1000);
	}
}

Все работает отлично. Но если в массиве находится нечетное количество ссылок пропадает первая картинка. А если же в массиве четное количество ссылок то все работает отлично. Что я не дописал в коде? По всей вероятности какая-то мелочь- но никак не пойму что именно не так? Буду благодарен за любую помощь.
Песочница

Answer 1

[0xD34F]

Ну, очевидно же - не надо полагаться на чётность счётчика. Да ещё и выглядит оно стрёмно, код-то для обоих случаев почти одинаковый. Можно положить картинки в массив, и на каждом шаге делать ему reverse. И вместо обращения к картинкам непосредственно - обращаться к элементам массива. Типа так.

Comments

[Mr_Sergo]

Благодарю за "разжеванный" ответ.