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

Question

[Расул Гитинов]

Есть такой переключатель слайдов:

<nav>
  <a href="#0" class="active" data-id="1">Запуск магазина</a>
  <a href="#0" data-id="2">Обучение сотрудников</a>
  <a href="#0" data-id="3">IT-поддержка 24/7</a>
  <a href="#0" data-id="4">Маркетинг</a>
</nav>
<div class="slides">
  <div class="slide active" data-id="1">Слайд 1</div>
  <div class="slide" data-id="2">Слайд 2</div>
  <div class="slide" data-id="3">Слайд 3</div>
  <div class="slide" data-id="4">Слайд 4</div>
</div>

И такой jQuery код, отвечающий за переключение вкладок:

$(function(){
	$('#support nav a').click(function(e) {
		e.preventDefault();
		$(this).addClass('active').siblings().removeClass('active');
		var tab = $(this).data('id');
		$('#support .slide[data-id="' + tab + '"]').addClass('active').siblings().removeClass('active');
	});
});

Как сделать так, чтобы вкладки автоматически переключались между собой по порядку через определенное время, а при выборе нужного пункта меню (слайда) автоматическое переключение отключалось?

Answer 1

[MrTimon]

Можно написать ф-цию для перехода на следующий слайд аля:

function showNextSlide() {
        var $activeslide = $('#support .slide.active');
        var $nextslide = $activeslide.next();
        if ($nextslide.length == 0) {
            $nextslide = $('#support .slide').first();
        }
        $activeslide.removeClass('active');
        $nextslide.addClass('active');
    }

ну или какую-то полутше ) . А потом пишеш

var loop = window.setInterval('showNextSlide',1000);

и в свой метод клик на ссылку дополнительно обнулить значение loop

$('#support nav a').click(function(e) {
    e.preventDefault();
    $(this).addClass('active').siblings().removeClass('active');
    var tab = $(this).data('id');
    $('#support .slide[data-id="' + tab + '"]').addClass('active').siblings().removeClass('active');

//добавить эти строки
    window.clearInterval(loop);
    loop = null;
  });

должно работать

Comments

[Расул Гитинов]

Неа.. Не заработало. При перезагрузке сразу активен второй слайд вместо первого и автоматическое переключение тоже не происходит)

[MrTimon]

Расул Гитинов, Видимо проблема с видимистю. измини вызов интервала так

var loop = window.setInterval(function() {
    	showNextSlide();
    },1000);

[Расул Гитинов]

MrTimon, Все равно почему то не работает

[MrTimon]

Расул Гитинов, Как не работает? вот смотри https://jsfiddle.net/x8pntv8L/1/

[MrTimon]

Расул Гитинов, Заработало ?

[Расул Гитинов]

MrTimon, Ага. Единственное, как сделать чтобы и пункты меню тоже переключались, а то только слайды переключаются?

[MrTimon]

Расул Гитинов, ну так с активного слайдера выберай атрибут data-id и по нему активируй нужный пункт меню. Также как ты делаешь для слайдеров только наоборот.

[MrTimon]

Расул Гитинов,
как то так :

function showNextSlide() {
        var $activeslide = $('#support .slide.active');
        var $nextslide = $activeslide.next();
        if ($nextslide.length == 0) {
            $nextslide = $('#support .slide').first();
        }
    var tab =$nextslide.data('id');
    $('#support .nav a[data-id="' + tab + '"]').addClass('active').siblings().removeClass('active');

        $activeslide.removeClass('active');
        $nextslide.addClass('active');

    }

[Расул Гитинов]

MrTimon, Не заработало. Я заменил строку под объявлением переменной var:

function showNextSlide() {
  var $activeslide = $('#support .slide.active');
  var $nextslide = $activeslide.next();
  if ($nextslide.length == 0) {
    $nextslide = $('#support .slide').first();
  }
  var tab =$nextslide.data('id');
  $(this'#support nav a').addClass('active').siblings().removeClass('active');

  $activeslide.removeClass('active');
  $nextslide.addClass('active');

}

В консоли браузера начал мигать атрибут class, но ничего не происходит

[MrTimon]

Расул Гитинов, Ну так что у тебя за строка :

$(this'#support nav a').addClass('active').siblings().removeClass('active');

Зачем там this вначале и где выбор по атрибуту data-id? Эта строка должна быть такой

$('#support nav a[data-id="' + tab + '"]').addClass('active').siblings().removeClass('active');

[Расул Гитинов]

MrTimon, Спасибо большое! Очень выручили)