JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow" class="latime_100">

		<img src="poze/sageata_st.png" class="navigare" id="navigare_st" onclick="go_prev();"></img>
		
		<div id="slider_1" class="slider" >

			<img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg"></img>
			
			

		</div>

		<div id="slider_2" class="slider">

			<img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg"></img>
			
			

		</div>

		<div id="slider_3" class="slider">

			<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwazmPOPcUTK1AmVSPQjH7YLlBywxTpkQi4LEQ40HJOg6_8Qyw"></img>
				
			

		</div>

		<img src="poze/sageata_dr.png" class="navigare" id="navigare_dr" onclick="go_next();"></img>
	</div>

CSS

.slider{

	width:100%;
    position:absolute;
}

.slider img{

  display: block;
  margin: 0 auto;
  width:100%;

  min-width: 1024px;

}

#slideshow{

	
	position: relative;
	background-color: white;
	z-index:100;
}

#navigare_st{

	position: absolute;
	z-index:1000;
	left:0px;
	top:45%;
	cursor: pointer;
	width:2.5%;
}

#navigare_dr {
  z-index: 1000;
  position: absolute;
  right: 0px;
  top: 45%;
  cursor: pointer;
  width:2.5%;
}

JavaScript

function slider_init(){

			$("#slider_2").hide();
			$("#slider_3").hide();
		}

	

		function go_slide(){

			if(i==3){

				$("#slider_"+i).fadeOut(1000);
				next = 1;
				$("#slider_"+ next).fadeIn(1000);
				i=1;
			}

			else {
				i=i+1;
				crt = i-1;
				var s_crt = "#slider_"+crt;

				var s_next = "#slider_"+i;

				$(s_next).fadeIn(1000);
				$(s_crt).fadeOut(1000);
			}

		}

		function go_next(){

			clearInterval(timer);
			go_slide();
			timer=setInterval(function(){go_slide();}, 3000);


		}

		function go_prev(){

			clearInterval(timer);

			if(i==1){

				$("#slider_"+i).fadeOut(1000);
				next = 3;
				$("#slider_"+ next).fadeIn(1000);
				i=3;
			}

			else {
				i=i-1;
				crt = i+1;
				var s_crt = "#slider_"+crt;

				var s_next = "#slider_"+i;

				$(s_next).fadeIn(1000);
				$(s_crt).fadeOut(1000);

			}

			timer=setInterval(function(){go_slide();}, 3000);


		}

function reglare(){
    alert("Inaltime imagine= "+$(".slider img").height());
}

var i=1;

		var timer;

$(window).load(function(){



			reglare();
			slider_init();
			timer = setInterval(function(){go_slide();}, 3000);

		});

		$(window).resize(function(){

			reglare();
				
		});