[spo]

Имеется несколько блоков с информацией и управляющие кнопки.
Для каждого блока своя кнопка.
При нажатии должен отображаться соответствующий блок.

Вот код который у меня работает.

<div class="wrapper">
	
	<div id="info1" class="info">1</div>
	<div id="info2" class="info">2</div>
	<div id="info3" class="info">3</div>

	<div class="ctrl">
		<a href="#info1">1</a>
		<a href="#info2">2</a>
		<a href="#info3">3</a>
	</div>
	
</div>

$('div.info').hide();
$('div.info:first-child').show();
$('div.ctrl a:first-child').addClass('active');
$('div.ctrl a').click(function() {
	$('div.info').hide();
	$('div.ctrl a').removeClass('active');
	$(this).addClass('active');
	$($(this).attr('href')).show().addClass('active');
	return false
});

Однако, возникла задача добавить автоматическое переключение по порядку до конца и так по кругу.

Я дописал код, но он почему то не работает. Не могу понять почему.

$(function() {
	
	$('div.info').hide();
	$('div.info:first-child').show();
	$('div.ctrl a:first-child').addClass('active');
	$('div.ctrl a').click(function() {
		$('div.info').hide();
		$('div.ctrl a').removeClass('active');
		$(this).addClass('active');
		$($(this).attr('href')).show().addClass('active');
		return false
	});
	
	setInterval(slide, 1000);
	
	function slide() {
		
		var links = $('div.ctrl a').size();
		
		for(var i=1; i<=links; i++) {
		
			if(i<3) {
				alert('if');
				$('div.info').hide();
				$('div.ctrl a.active').removeClass('active').next().addClass('active');
				$($('div.ctrl a.active').attr('href')).show().addClass('active');
			}
			else {
				alert('else');
				$('div.info').hide();
				$('div.ctrl a').removeClass('active');
				$('div.ctrl a:first-child').addClass('active');
				$($('div.ctrl a.active').attr('href')).show().addClass('active');
			}
		
		}
		
	}
	
});

Там есть строки с alert это я делал для проверки. Интересно то что с этим alert`ом все работает, но если его убрать то перестает.