[malevi4]

Добрый вечер. Сразу скажу, что я только начинаю свой путь в JS и много чего еще не знаю, либо делаю вовсе некорректно.

У меня задача - сделать простой слайдер из 4х картинок. Сам слайдер работает, переключает картинки нормально. Все как я и запланировал. Только есть один небольшой нюанс, когда выбрана первая картинка, нужно чтобы первый квадратик на слайде менял цвет, когда выбрана вторая картинка слайда, нужно чтобы второй квадратик менял цвет и так далее.

Так выглядит слайд


Вот ХТМЛ код слайда:

<div id="telo">
	<div id="levo"></div>
	<div id="pravo"></div>
	
		<div id="knopki"> // собственно, это и есть мои "квадратики"
		<span id="01"> </span> 
		<span id="02"> </span>
		<span id="03"> </span>
		<span id="04"> </span>
		
		</div>
	
	<img id="img" src="" alt="">
	
</div>

Вот JS

var images = ["01.jpg","02.jpg","03.jpg","04.jpg"]; 
var curentImage = 0; 


$("#img").attr('src',images[curentImage]); 



$('#levo').click(function(){ 
	if(curentImage != 0){ 
	curentImage--; 
	setTimeout(function(){$("#img").attr('src',images[curentImage])},300); 
	}
	

});

$('#pravo').click(function(){
	if(curentImage < images.length){
	curentImage++;
	setTimeout(function(){$("#img").attr('src',images[curentImage])},300);

	}
});

Вот как я планировал решить данную задачу (решений было много, но это одно из последних): хотел в функцию выборки $('#pravo') написать следующее

if(images[curentImage] == "01.jpg"){
   $('#01').addClass('active'); // #01 - это id первого квадратика. Новый класс ему добавить серый фон. То есть, если images[curentImage] будет первой картинкой, то первому квадратику дать фон серым.
}

У меня ничего не вышло. Может вы что-то посоветуете? Или подскажите что я делаю не правильно.