setInterval não para após restartado

[Carcleo 4]

Estou tentando criar um slideshow mas personalizado sem depender de biblioteca de terceiros (salvo, jQuery);

 

O objetivo é:

 

A) O slide rodar interminavelmente.

B) Ao passar o mouse no slide, ele deve parar;

C) Ao deixar o slide, ele deve continuar rodando de onde parou!

D) AQUI ESTÁ O PROBLEMA => Ao passar o mouse novamente o interval deve parar. Mas não está parando,

function intervalo () {
$(".slider > #next").click ();
}

interval = setInterval(intervalo,4000);

$(".slider > ul > li").mouseover(function(){
clearInterval(interval);
}).mouseout(function(){
interval = setInterval(intervalo,4000);
});

$(".slider > #back").click ( function(){
	var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última
	$('slider ul li:last-of-type').remove(); // remove a última
	$(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira
});

$(".slider > #next").click ( function(){
	var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira
	$('.slider ul li:first-of-type').remove(); // remove a primeira
	$(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última
});	

* {
	margin: 0;
	padding: 0;
}

body {
		display: flex;
		width: 1000px;
		margin: 0 auto;
}

.slider {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 1000px;
	height: 150px;
	overflow: hidden;	
	border: 1px solid #000;
}

.slider > ul {
	display: flex;
	flex-wrap: wrap;
	width: 5000px;	
}

.slider > ul > li {
	display: flex;
	width: 500px;
	height: 150px;
}

.slider > button {
	position: absolute;
	display: flex;
	justify-content: center;
	top: calc(45% - 15px);
	width: 30px;
	height: 30px;
	opacity: .2
}

.slider > button:hover {
	opacity: 1;
	cursor: pointer;
}

.slider > button#back {
	left: 10px;
}

.slider > button#next {
	right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider">

	<ul>
	  <li> Slide  1 </li>
	  <li> Slide  2 </li>
	  <li> Slide  3 </li>
	  <li> Slide  4 </li>
	</ul>		

	<button id="back"> BACK </button>
	<button id="next"> NEXT </button>

</div>

O que estará errado!?

[TheRonaldoStar 0]

let Timer;

function intervalo() {
	$(".slider > #next").click ();
};

Timer = setTimeout(function() {
	intervalo();
}, (4000));

$(".slider > ul > li").mouseover(function(){
	clearInterval(Timer);
}).mouseout(function(){
	Timer = setTimeout(function() {
		intervalo();
	}, (4000));
});

$(".slider > #back").click (function(){
	const liMover = ($(".slider ul li:last-of-type"));
	$(".slider ul li:last-of-type").remove();
	$(liMover).insertBefore(".slider ul li:first-of-type");
});

$(".slider > #next").click (function(){
	const liMover = ($(".slider ul li:first-of-type"));
	$(".slider ul li:first-of-type").remove();
	$(liMover).insertAfter(".slider ul li:last-of-type");
});