homework/ModuleFirstTest/slider-Animation.js

'use strict'
var body = document.querySelector("body");
var slider = document.querySelector(".slider");
var slides = document.querySelector(".slides");
var bodyWidth = +getComputedStyle(body).width.replace("px","");
var arrowLeft = document.getElementById("arrow-left");
var arrowRight = document.getElementById("arrow-right");
var slideNum = 1;
var	isCanSlide = true;
for (let i = 0; i < slides.children.length; i++) {
	slides.children[i].style.left = (100 + bodyWidth * i) + "px";
}

 function nextSlide(){
 	
	if(slideNum < slides.children.length && isCanSlide){
		isCanSlide = false;
		for (var k = 0; k < slides.children.length; k++) {
			slides.children[k].style.left = +getComputedStyle(slides.children[k]).left.replace("px","") - bodyWidth + "px";
		}
		slideNum++;
		setTimeout(function(){
			isCanSlide = true;
		},1500)
		for (let i = 0; i < dotContainer.children.length; i++) {
				dotContainer.children[i].style.border = "1px solid #fff"; 
				dotContainer.children[i].style.backgroundColor = "transparent"; 
		}
		var activeDot = document.getElementById(slideNum);
		activeDot.style.border = "1px solid #00e0d0"; 
		activeDot.style.backgroundColor = "#00e0d0"; 
	}	
	
}

arrowRight.onclick = nextSlide;

function previousSlide(){
	
	if(slideNum > 1 && isCanSlide){
		isCanSlide = false;
		for (var k = 0; k < slides.children.length; k++) {
			slides.children[k].style.left = +getComputedStyle(slides.children[k]).left.replace("px","") + bodyWidth  + "px";
		}
		slideNum--;
		setTimeout(function(){
			isCanSlide = true;
		},1500)
		for (let i = 0; i < dotContainer.children.length; i++) {
				dotContainer.children[i].style.border = "1px solid #fff"; 
				dotContainer.children[i].style.backgroundColor = "transparent"; 
		}
		var activeDot = document.getElementById(slideNum);
		activeDot.style.border = "1px solid #00e0d0"; 
		activeDot.style.backgroundColor = "#00e0d0"; 
	}	
	
}

arrowLeft.onclick = previousSlide;

setTimeout(function(){
	for (let i = 0; i < slides.children.length; i++) {
		slides.children[i].style.transition = "all 1.5s ease";
	}
},1);

///////////////////////////////////////////

var dotContainer = document.createElement("div"); 
dotContainer.className = "dot-container";
dotContainer.setAttribute("style","position: absolute; top: 97%; left: 48%;")
for (let i = 0; i < slides.children.length; i++) {
	var dot = document.createElement("div");
	dot.setAttribute("id",i + 1);
	dot.onclick = function(){
		if(isCanSlide){
			for (let i = 0; i < dotContainer.children.length; i++) {
				dotContainer.children[i].style.border = "1px solid #fff"; 
				dotContainer.children[i].style.backgroundColor = "transparent"; 
			}
			this.style.border = "1px solid #00e0d0"; 
			this.style.backgroundColor = "#00e0d0"; 
		}
		if(this.getAttribute("id") > slideNum){
			if(slideNum < slides.children.length && isCanSlide){
				isCanSlide = false;
				for (var k = 0; k < slides.children.length; k++) {
					slides.children[k].style.left = +getComputedStyle(slides.children[k]).left.replace("px","") - bodyWidth * (this.getAttribute("id") - slideNum) + "px";
				}
				slideNum += this.getAttribute("id") - slideNum;
				setTimeout(function(){
					isCanSlide = true;
				},1500)
			}	
			
		}
		else if(this.getAttribute("id") < slideNum){
			if(slideNum > 1 && isCanSlide){
				isCanSlide = false;
				for (var k = 0; k < slides.children.length; k++) {
					slides.children[k].style.left = +getComputedStyle(slides.children[k]).left.replace("px","") + bodyWidth * (slideNum - this.getAttribute("id"))  + "px";
				}
				slideNum -= slideNum - this.getAttribute("id");
				setTimeout(function(){
					isCanSlide = true;
				},1500)
			}	
			
		}
	}
	dot.setAttribute("style","border-radius: 50%; margin-right: 5px; border:1px solid #fff; width: 10px; height: 10px; display: inline-block; ");
	if(i === 0){
		dot.setAttribute("style","border-radius: 50%; margin-right: 5px; background-color: #00e0d0; border:1px solid #00e0d0; width: 10px; height: 10px; display: inline-block; ");
	}
	dotContainer.appendChild(dot);
}
slider.appendChild(dotContainer);