Slider JS zmiana slajdów po kilku sekundach

Cześć mam mały problem.
Mam slider przełączany za pomocą kropek odnoszonych do danego slajda. Klasa .slide-single ma domyślnie opacity:0 a klasa active zmienia na 1

<section class="slider">
	<div class="slide-container">
		<div class="slide-single">
		<img alt="img1" src="img1"/>
		
		<div class="slider-right">
			<h2>tytuł</h2>

			<p>treść</p>
			<a href="link">
				<div>przycisk</div>
			</a>
		</div>
		</div>
		<div class="slide-single">
                <img alt="img2" src="img2"/>
		
		<div class="slider-right">
			<h2>tytuł</h2>

			<p>treść</p>
			<a href="link">
				<div>przycisk</div>
			</a>
		</div>
		</div>
		<div class="slide-single">
		<img alt="img3" src="img3"/>
		
		<div class="slider-right">
			<h2>tytuł</h2>

			<p>treść</p>
			<a href="link">
				<div>przycisk</div>
			</a>
		</div>
		</div>
		<div class="slide-single">
		<img alt="img4" src="img4"/>
		
		<div class="slider-right">
			<h2>tytuł</h2>

			<p>treść</p>
			<a href="link">
				<div>przycisk</div>
			</a>
		</div>
		</div>
	</div>	

	<div class="slider-controls">
		  <div class="control-dot"></div>
		  <div class="control-dot"></div>
		  <div class="control-dot"></div>
		  <div class="control-dot"></div>
 	</div>
</section>

function slider(){

	$('.control-dot').first().addClass('active');
	$('.slide-single').first().addClass('active');
		 
	$('.control-dot').click(function(){
		var $this = $(this),
			$dotLength = $this.parent().children(),
			position = $dotLength.index($this);
		
		$('.control-dot').removeClass('active').eq(position).addClass('active');
		$('.slide-single').removeClass('active').eq(position).addClass('active');
		
	});

};

i do tego momentu wszystko działa tak jak chcę. Chciałem jednak dodać jeszcze funkcję która zmieniałaby slajdy np. po 3 sekundach w kółko. Próbowałem z setInterval i pętlą ale nie mogę ruszyć albo wrzuca mi do wszystkich .slide-single klasę active, albo do ostatniego albo tylko do kolejnego i nie idzie dalej. Mógłby ktoś pomóc próbowałem sam i nie mogę z tym dojść do ładu

Podeslij jeszcze css'y to będziemy mogli zasymulować kod

/*----Slider-----*/
 .slider{
	background-color: #f6f6f6;
	width: 100%;
	height: 100vh;
	 margin: auto;
}
 .slider .slide-container{
	position: absolute;
	width: 100%;
	height: 80%;
	margin: 0 auto;
	top: 40%;
	transform: translateY(-50%);
}
 .slider .slide-container .slide-single{
	position: absolute;
    opacity: 0;
	width: 100%;
	height: 100%;
	margin: 5% auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
 .slider .slide-container .slide-single .slider-right{
	width: 95%;
	text-align: center;
	margin: 0 auto;
}
 .slider .slide-container .slide-single img{
	width: 100%;
	height: auto; 
	margin: 80px auto 0;
	z-index: 20;

}

 .slider .slider-right a div{
	width: auto;
	height: auto;
	background: rgb(252, 206, 5);
	font-size: 1.5em;
	font-style: italic;
	font-weight: 400;
	color: #fff;
	padding: 15px 5px;
	margin: 3% auto;
	z-index: 20;
}
     .slider .slider-controls {
      width: 160px;
      height: 50px;
		margin: 0 auto;
		bottom: 0;
		z-index: 2000;
		position: relative;
  	}
 .slider .slide-container .slide-single.active {
		opacity: 1; 
	}
 .slider .slider-controls .control-dot {
        width: 20px;
        height: 20px;
		float: left;
		  margin: 0 10px;
		  
        background-color: #b3d07b;
        border-radius: 50%;
        cursor: pointer;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;

    	}
 .slider .slider-controls .control-dot.active {
          background-color: #94bb46; 
      	}

https://jsfiddle.net/u7bfpgxe/
Cos w ten deseń :)

O to to to to :) Dzięki bardzo za pomoc o to właśnie mi chodziło :D