Слайдер с автоматической и ручной прокруткой?

Question

[HealSpirit]

Здравствуйте, помогите, пожалуйста, разобраться с этим слайдером:

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

<div class="slider">
	<ul class="slides">
		<li class="mySlides">1</li>
		<li class="mySlides">2</li>
		<li class="mySlides">3</li>
		<li class="mySlides">4</li>
	</ul>
	<a href="#" onclick="plusDivs(-1)">&#10094</a>
	<a href="#" onclick="plusDivs(1)">&#10095</a>
	<ul class="control-panels">
		<li class="dots"><a href="#" onclick="currentDiv(1)">Слайд1</a></li>
		<li class="dots"><a href="#" onclick="currentDiv(2)">Слайд2</a></li>
		<li class="dots"><a href="#" onclick="currentDiv(3)">Слайд3</a></li>
		<li class="dots"><a href="#" onclick="currentDiv(4)">Слайд4</a></li>
	</ul>
</div>

.red {
	color: red;
}

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var mySlides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dots");
  if (n > mySlides.length) {
    slideIndex = 1;
  }    
  if (n < 1) {
    slideIndex = mySlides.length;
  }
  for (i = 0; i < mySlides.length; i++) {
     mySlides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].firstChild.className = dots[i].firstChild.className.replace(" red", "");
  }
  mySlides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].firstChild.className += " red";  
}

В ручном режиме работает как я и хотел (неважно, нажимает на стрелочки или на кнопки, слайды меняются)
https://codepen.io/anon/pen/WdOwzm
В автоматическом тоже вроде нормально, каждые 2 секунды смена слайда
https://codepen.io/anon/pen/JMJXWK
Но стоит понажимать кнопки в автоматическом режиме, начинается какая-то вакханалия.
Как исправить последние строчки?

Answer 1

[root09]

https://codepen.io/anon/pen/LeLNqj

Comments

[HealSpirit]

Спасибо, отмечу решением, но до конца все равно не понял, пока сложно(

[DTX]

И... Вам уходит премия "Самое нестандартное мышление 2018"!

Answer 2

[DTX]

Так при каждом вызове основной функции создаётся таймер, вот и начинается вакханалия.
Старый таймер надо очищать.
https://codepen.io/anon/pen/JMJEvZ

Comments

[HealSpirit]

У меня стрелки переключения слайдов не работают(

[DTX]

HealSpirit, отладчик в руки и вперёд. Кодпен обновил, но архитектуру я бы всё равно поменял.