Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Добавить кнопки навигации к слайдеру. (https://javascript.ru/forum/jquery/58588-dobavit-knopki-navigacii-k-slajjderu.html)

Андрей Розумович 30.09.2015 12:58

Добавить кнопки навигации к слайдеру.
 
Здравствуйте! Как добавить кнопки, для перехода на определенный слайд. Допустим, для каждого слайда, под самим слайдером, свой кружочек. При нажатии на кружочек совершается переход на определенный слайд. А дальше по порядку.
$(function () {
	var el =  $('#slider img'),
		indexImg = 1,
		indexMax = el.length;
	function change () {
		el.fadeOut(500);
		el.filter(':nth-child('+indexImg+')').fadeIn(500);
	}	
	function autoCange () {	
		indexImg++;
		if(indexImg > indexMax) {
			indexImg = 1;
		}			
		change ();
	}	
	var interval = setInterval(autoCange, 2000);
	$('#slider').mouseover(function() {
		clearInterval(interval);
	});
	$('#slider').mouseout(function() {
		interval = setInterval(autoCange, 2000);
	});
	$('#slider').append('<span class="next"></span><span class="prev"></span>');
	$('span.next').click(function() {
		indexImg++;
		if(indexImg > indexMax) {
			indexImg = 1;
		}
		change ();
	});
	$('span.prev').click(function() {
		indexImg--;
		if(indexImg < 1) {
			indexImg = indexMax;
		}
		change ();
	});	
});

Андрей Розумович 30.09.2015 14:17

Сам додумался. Теперь только незнаю как классы подвязать( типа .active)
$('li.first_slide,.dot_first').click(function() {
		if(indexImg = indexMax) {
			indexImg = 1;
		}
		change ();
	});
	$('li.second_slide,.dot_second').click(function() {
		if(indexImg = indexMax) {
			indexImg = 2;
		}
		change ();
	});
    $('li.third_slide,.dot_third').click(function() {
		if(indexImg = indexMax) {
			indexImg = 3;
		}
		change ();
	});

рони 30.09.2015 18:21

Андрей Розумович,
http://javascript.ru/forum/misc/5195...slajjdera.html


Часовой пояс GMT +3, время: 09:51.