JSFiddle - React, Tailwind, and code Playground

by Alen Doe

HTML

<div id="slides">
	<div id="1_img"class="slide showing">
    <img id="img_1" src="https://www.motto.net.ua/pic/201210/800x600/motto.net.ua-34764.jpg"></div>
	<div id="2_img"class="slide">
    <img id="img_2" src="http://gaper.narod.ru/photo/russia/nizhegorobl/kulebaki/3974.jpg"></div>
	<div id="3_img"class="slide">
    <img id="img_3" src="http://photosflowery.ru/photo/4c/4c0d9641676b7dc5b51e1cd1a9f14cd7.jpg"></div>
<div class="radio">
  <button class="but_next" id="next">next</button>
  <button class="but_prev" id="previous">previous</button>
  <div class="select">
    <input type="radio" name="radioname" value="radio1" onclick="imgClick1()">
    <input type="radio" name="radioname" value="radio2" onclick="imgClick2()">
    <input type="radio" name="radioname" value="radio3" onclick="imgClick3()">
  </div>
</div>
</div>

CSS

#slides {
	position: relative;
  width: 800px;
	height: 600px;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

.slide {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;

	-webkit-transition: opacity 5s;
	-moz-transition: opacity 5s;
	-o-transition: opacity 5s;
	transition: opacity 5s;
}

.showing {
	opacity: 1;
	z-index: 2;
}

.slide {
	box-sizing: border-box;
	background: #333;
	color: #fff;
}

.slide:nth-of-type(1) {
	background: red;
}
.slide:nth-of-type(2) {
	background: orange;
}
.slide:nth-of-type(3) {
	background: green;
}
.slide:nth-of-type(4) {
	background: blue;
}
.slide:nth-of-type(5) {
	background: purple;
}

.but_next,
.but_prev {
  z-index: 999999;
  position: absolute;
}

.select {
  z-index: 999999;
  position: absolute;
}

.but_next {
  top: 50%;
  right: 0;
  -moz-transform: translate (-50%,0);
  -ms-transform: translate (-50%,0);
  -webkit-transform: translate (-50%,0);
  -o-transform: translate (-50%,0);
  transform: translate (-50%,0);
}

.but_prev {
  top: 50%;
  left: 0;
  -moz-transform: translate (-50%,0);
  -ms-transform: translate (-50%,0);
  -webkit-transform: translate (-50%,0);
  -o-transform: translate (-50%,0);
  transform: translate (-50%,0);
}

JavaScript

var slides = document.querySelectorAll('#slides .slide');
var index = 0;

/*setInterval(function nextSlide(){
	slides[index].className = 'slide';
	index = (index+1)%slides.length;
	slides[index].className = 'slide showing';
}, 3000);*/

function Go(n) {
  slides[index].className = 'slide'; 
  index = (n+slides.length)%slides.length;
  slides[index].className = 'slide showing';
}

next.onclick = function () {
	Go(index+1);
}

previous.onclick = function () {
  	Go(index-1); 
}

function imgClick1() {
  if (slides[0] !== slides[index]) {
  document.getElementById('1_img').className = 'slide showing';
  slides[index].className = 'slide';
  }; 
}

function imgClick2() {
  if (slides[1] !== slides[index]) {
  document.getElementById('2_img').className = 'slide showing';
  slides[index].className = 'slide';
  }; 
}