JSFiddle - React, Tailwind, and code Playground

by koteWebskyi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Slider</title>
</head>
<body>
  <div class="container">
    <div class="gallery">
      <img src="https://cdn.lifehacker.ru/wp-content/uploads/2017/08/Milanote-Web-Clipper-soxranit-kontent-iz-Seti-na-interaktivnyx-doskax_1502392603-1140x570.jpg" alt="" >
      <img src="https://cdn.lifehacker.ru/wp-content/uploads/2016/10/Cover_web_2_1477396862-1140x570.jpg" alt="">
      <img src="https://cdn.lifehacker.ru/wp-content/uploads/2015/11/Untitled_03_1447088628-1140x570.png" alt="">
      <img src="https://cdn.lifehacker.ru/wp-content/uploads/2016/10/Cover_kod_1_1475575283-1140x570.jpg" alt="">
      <img src="https://cdn.lifehacker.ru/wp-content/uploads/2017/08/Milanote-Web-Clipper-soxranit-kontent-iz-Seti-na-interaktivnyx-doskax_1502392603-1140x570.jpg" alt="">
    </div>
    <div class="buttons">
      <button id="btn-prev" class = "btn">Туда</button>
      <button id="btn-next" class = "btn">Сюда</button>
    </div>
  </div>
</body>
</html>

CSS

body{
	margin: 0;
	padding-top: 5px;
}
.gallery{
	margin: 0 auto;
	width: 1000px;
	height: 500px;
	position: relative;
}


.gallery img{
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	opacity:0;
	transition : opacity 1s; 
}

img.active{
	opacity: 1;
}

.buttons{
	margin-top: 10px;
	display: flex;
	justify-content: center;
}

.btn{
	width: 70px;
	height: 40px;
	padding: 4px;
	cursor: pointer;
	font-family: Tahoma;
	color: #fff;
	background-color: #222;
	border: 1px solid #111;
	border-radius: 3px;
	margin-right: 10px;
}

JavaScript

window.onload = function(){

//	console.log(this); - window
	var slider = new Slider({
		images : '.gallery img',
		btnPrev : '#btn-prev',
		btnNext : '#btn-next',
		//auto: true		
	}) 

	function Slider(obj){
		this.images =  document.querySelectorAll(obj.images);
		//console.log(this) - Slider obj
		var self = this;

		this.btnPrev = document.querySelector(obj.btnPrev);
		this.btnNext = document.querySelector(obj.btnNext);
		//this.auto; попозже

		this.images[0].classList.add('active');
		var i = 0 ;

		this.btnNext.addEventListener('click', function(){
				self.images[i].classList.remove('active');
				i++;
				if (i == self.images.length) {
					i = 0;
				}
				self.images[i].classList.add('active'); 
			})
		// btnNext.onclick - finished

		this.btnPrev.addEventListener('click', function(){
				self.images[i].classList.remove('active');
				i--;
				if (i < 0) {
					i = self.images.length-1;
				}
				self.images[i].classList.add('active'); 
			})
		 // btnPrev.onclick - finished
	}
}