Slideshow com Javascript

Olá pessoal!

Estou começando a programar em Javascript e recentemente tive dificuldades em criar um slideshow. Andei pesquisando em alguns sites até que achei um no W3Schools, fiz umas adaptações e consegui isto:

HTML

<div class="slideshow-container">
	<div class="slide fade" style="background: url('imagem.png');">
 <h2><a href="#">Título</a></h2>
	</div>
 <div class="slide fade" style="background: url('imagem2.png');">
 <h2><a href="#">Título 2</a></h2>
	</div>
 <div class="slide fade" style="background: url('imagem3.png');">
 <h2><a href="#">Título 3</a></h2>
	</div>
</div>
	<a class="prev" onclick="plusSlides(-1)"><span class="fa fa-chevron-left"></span></a>
	<a class="next" onclick="plusSlides(1)"><span class="fa fa-chevron-right"></span></a>

	 

	CSS

.slide{ display: none; height: 200px; }
.slide h2{ font-size: 35px; }
.slideshow-container{ max-width: 300px; height: 200px; background: #000; }
.slideshow-container img{ border-radius: 0; }
.slideshow-container:hover .prev, .slideshow-container:hover .next{ opacity: 1; }
.prev, .next{ opacity: 0; cursor: pointer; position: absolute; top: 50%; width: auto; padding: 20px; margin-top: -50px; color: #eee; font-weight: bold; transition: 0.4s ease; font-size: 40px; }
.prev, .next:hover{ color: #ccc; }
.next{ right: 0; }
.prev:hover, .next:hover{ border: none;}
.fade{ -webkit-animation-name: fade; -webkit-animation-duration: 2s; animation-name: fade; animation-duration: 2s; }
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} }
@keyframes fade { from {opacity: .4} to {opacity: 1} }

JavaScript

var slideIndex = 0;
showSlides();

function showSlides() {
	var i;
	var slides = document.getElementsByClassName("slide");
	for (i = 0; i < slides.length; i++) {
 slides[i].style.display = "none";
	}
	slideIndex++;
	if (slideIndex> slides.length) {slideIndex = 1}
	slides[slideIndex-1].style.display = "block";
	setTimeout(showSlides, 5000);
	}

function plusSlides(n) {
	tSlides(slideIndex += n);
}

function currentSlide(n) {
	tSlides(slideIndex = n);
}

function tSlides(n) {
	var i;
	var slides = document.getElementsByClassName("slide");
	if (n > slides.length) {slideIndex = 1}
	if (n < 1) {slideIndex = slides.length}
	for (i = 0; i < slides.length; i++) {
	slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}

	Então, como faço para ele parar quando eu posicionar o mouse sobre o slideshow? 

	Agradeço para quem puder ajudar.