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

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>

и есть такой кусок кода:

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

$(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');
		window.clearInterval(loop);
		loop = null;
	});

	$('#support .slide').mouseenter(function(e) {
		e.preventDefault();
		window.clearInterval(loop);
		loop = null;
	});
});

• каждые 3 секунды слайдер перелистывается;
  
• при нажатии на ссылку, слайдер останавливается;
  
• при наведении на слайд тоже останавливается;
  

Не могу разобраться, как сделать, чтобы когда пользователь убирает мышь со слайда, он обратно начинал листаться каждые 3 секунды как и раньше. И еще, чтобы при нажатии на слайд анимация отключалась совсем (как при нажатии на ссылку).

Answer 1

[Stalker_RED]

mouseenter вы используете, а о mouseleave не подозреваете?
На всякий случай вот вам весь список https://api.jquery.com/category/events/mouse-events/

Comments

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

Я пробовал, но слайдер начинает моросить. Перепрыгивать начинает быстро с слайда на слайд

[Stalker_RED]

Расул Гитинов, вероятно у вас запускается более одного таймера. Проверяйте, если loop не null, то новый запускать не нужно.

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

Stalker_RED, Помогло. Сделал так:

$('#support .slide').mouseleave(function(e) {
	e.preventDefault();
	if(loop == null){
		loop = window.setInterval(function() {
			showNextSlide();
		},3000);
	}
});