Как сделать автоматическое переключение ссылок (блоков)?

Question

[Вениамин Смирнов]

Всем привет!

Есть нетипичного вида галерея:


Базовый функционал (кликнул на блок с превью - открылось изображение по центру в большом разрешении) я реализовал. Правда, на мой взгляд, сделал немного топорно (через .show/.hide элементов - но только из-за нетипичности слайдера, иначе бы взял owlcarousel).

Но необходима еще автоматическая смена изображений в галерее. Т.е. чтобы каждые 5 секунд (если пользователь не кликает по превью) изображения сменялись друг другом.

В данный момент код такой:

<div class="row margintop50">
			<div class="col-md-2 col-md-offset-1">
				<a href="" class="cert-place cert01"></a>
				<a href="" class="cert-place cert02"></a>
				<a href="" class="cert-place cert03"></a>				
			</div>

			<div class="col-md-6">
				<div class="cert-place-full full01"></div>
				<div class="cert-place-full full02" style="display: none;"></div>
				<div class="cert-place-full full03" style="display: none;"></div>
				<div class="cert-place-full full04" style="display: none;"></div>
				<div class="cert-place-full full05" style="display: none;"></div>
				<div class="cert-place-full full06" style="display: none;"></div>
			</div>

			<div class="col-md-2">
				<a href="" class="cert-place cert04"></a>
				<a href="" class="cert-place cert05"></a>
				<a href="" class="cert-place cert06"></a>				
			</div>
		</div>

$(document).ready(function(){
	$('a.cert01').click(function(){
			$(".full01").show();
			$(".full02").hide();
			$(".full03").hide();
			$(".full04").hide();
			$(".full05").hide();
			$(".full06").hide();
			return false;
	});
	$('a.cert02').click(function(){
			$(".full01").hide();
			$(".full02").show();
			$(".full03").hide();
			$(".full04").hide();
			$(".full05").hide();
			$(".full06").hide();
			return false;
	});
	$('a.cert03').click(function(){
			$(".full01").hide();
			$(".full02").hide();
			$(".full03").show();
			$(".full04").hide();
			$(".full05").hide();
			$(".full06").hide();
			return false;
	});
	$('a.cert04').click(function(){
			$(".full01").hide();
			$(".full02").hide();
			$(".full03").hide();
			$(".full04").show();
			$(".full05").hide();
			$(".full06").hide();
			return false;
	});
	$('a.cert05').click(function(){
			$(".full01").hide();
			$(".full02").hide();
			$(".full03").hide();
			$(".full04").hide();
			$(".full05").show();
			$(".full06").hide();
			return false;
	});
	$('a.cert06').click(function(){
			$(".full01").hide();
			$(".full02").hide();
			$(".full03").hide();
			$(".full04").hide();
			$(".full05").hide();
			$(".full06").show();
			return false;
	});
});

Буду очень признателен за помощь в решении вопроса.

Answer 1

[devstudent]

не изголяйтесь зря, перепилить готовый слайдер не так долго, зато все работает как по маслу. а прописывать обработку отдельно(!) клика по каждой фотке - как у вас, гораздо худший вариант , хотя бы форичем надо. да и к чему, велосипед-то уже есть!

Comments

[Вениамин Смирнов]

У меня всего лишь 6 элементов, но я не знаю, куда копать, чтобы это реализовать :)

[devstudent]

Вениамин Смирнов: вот я делала что-то наподобие, http://c2n.me/3zijZYLб здесь vforos.mukovoz.com на основе bx-slider, для достижения вашей цели необходимо немного поменять расположение и стили блоков внутри пейджера слайдераи все будет ок

[Вениамин Смирнов]

devstudent: в итоге так же заюзал bxslider, быстро и легко настроил под себя. Спасибо Вам за рекомендацию)

Answer 2

[Михаил Лялин]

А готовые реализации каруселей чем не подходят?

Comments

[Вениамин Смирнов]

Тем, что меня пугает то, сколько нужно перелопатить их, чтобы привести к нужному мне виду. А в моем случае (в данный момент) нужно только запустить переключение фотографий. Или программное нажатие на ссылку с определенным классом каждые 5 секунд.