var arrowLeft = document.getElementById("arrow-left");
var arrowRight = document.getElementById("arrow-right");
var slides = document.querySelector(".slides");
var i = 0;
arrowRight.onclick = function(){
	if(i === slides.children.length - 1){
		slides.children[i].style.opacity = "0";
		slides.children[i].style.zIndex = "0";
		slides.children[0].style.opacity = "1";
		slides.children[0].style.zIndex = "1";
		i = 0;
	}
	else{
		slides.children[i].style.opacity = "0";
		slides.children[i].style.zIndex = "0";
		slides.children[i + 1].style.opacity = "1";
		slides.children[i + 1].style.zIndex = "1";
		i++;
	}
}
arrowLeft.onclick = function(){
	if(i === 0){
		slides.children[0].style.opacity = "0";
		slides.children[0].style.zIndex = "0";
		slides.children[slides.children.length - 1].style.opacity = "1";
		slides.children[slides.children.length - 1].style.zIndex = "1";
		i = slides.children.length - 1;
	}
	else{
		slides.children[i].style.opacity = "0";
		slides.children[i].style.zIndex = "0";
		slides.children[i - 1].style.opacity = "1";
		slides.children[i - 1].style.zIndex = "1";
		i--;
	}
}
for (var k = 0; k < slides.children.length; k++) {
	var dotsContainer = document.createElement("div");
	dotsContainer.setAttribute("class", "dots-container");
	dotsContainer.setAttribute("style","margin-top: 50px; ");
	slides.children[k].appendChild(dotsContainer);
	for (var j = 0; j < slides.children.length; j++) {
		var dot = document.createElement("div");
		dot.setAttribute("name",j)
		dot.onclick = function(){
			if(!this.getAttribute("class") ){
				
				slides.children[i].style.opacity = "0";
				slides.children[i].style.zIndex = "0";
				i = +this.getAttribute("name");
				slides.children[i].style.opacity = "1";
				slides.children[i].style.zIndex = "1";

			}

		}
		if(j === k){
			
			dot.setAttribute("style","border-radius: 50%; margin-right: 5px; border:1px solid #00e0d0; background-color: #00e0d0; width: 10px; height: 10px; display: inline-block; ");
			dot.setAttribute("class", "active");
			slides.children[k].querySelector(".dots-container").appendChild(dot);
		}
		else{
			
			dot.setAttribute("style","border-radius: 50%; margin-right: 5px; border:1px solid #fff; width: 10px; height: 10px; display: inline-block; ");
			slides.children[k].querySelector(".dots-container").appendChild(dot);
		}
			}
		
	}