Sliding Carousel

by Tom M

HTML

<div id="frame">
  <div id='carousel'>
    <div id='one' class='slide'></div>
    <div id='two' class='slide'></div>
    <div id='three' class='slide'></div>
  </div>
</div>


<div id ="buttonContainer">
<button>Back</button>
<button>Forward</button>
</div>

CSS

#frame {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  left: 200px;
}

#carousel {
  width: 615px;
  position: relative;
  left: -200px;
  border: 1px solid red;
}

.slide {
  width: 200px;
  height: 200px;
  display: inline-block;
  position: relative;
  left: 0px;
  transition: transform 0.75s ease;
}

#one {
  background-color: black;
}

#two {
  background-color: yellow;
}

#three {
  background-color: green;
}

#buttonContainer {
  position: absolute;
  top: 250px;
}

JavaScript

let button = document.querySelector('#buttonContainer');
let slides = document.getElementsByClassName('slide');

let square1 = document.querySelector('#one');
let square2 = document.querySelector('#two');
let square3 = document.querySelector('#three');

let slideArray = [square1, square2, square3];
let blackValue = window.getComputedStyle(slideArray[0]).left;

let counter = [0, 0, 0];

let slideMoves = [
	[200, 200, -400], 
  [+200, -400, +200], 
  [-400, +200, +200]
];    	

function shift(square, shiftAmount) {
	square.style.transform = `translate(${shiftAmount}px)`;
}

button.addEventListener('click', function(e) {
	if (e.target.textContent === 'Forward') {
    if (counter[0] === 0) {
      counter[0] += slideMoves[0][0];
      shift(slideArray[0], counter[0]);
    }
    else if (counter[0] === 200) {
      counter[0] += slideMoves[0][1];
      shift(slideArray[0], counter[0]);
    }
    else if (counter[0] === 400) {
      counter[0] += slideMoves[0][2];
      shift(slideArray[0], counter[0]);
    } 
      
    if (counter[1] === 0) {
      counter[1] += slideMoves[1][0];
      shift(slideArray[1], counter[1]);
    }
    else if (counter[1] === 200) {
      counter[1] += slideMoves[1][1];
      shift(slideArray[1], counter[1]);
    }
    else if (counter[1] === -200) {
      counter[1] += slideMoves[1][2];
      shift(slideArray[1], counter[1]);
    }
    
    if (counter[2] === 0) {
      counter[2] += slideMoves[2][0];
      shift(slideArray[2], counter[2]);
    }
    else if (counter[2] === -400) {
      counter[2] += slideMoves[2][1];
      shift(slideArray[2], counter[2]);
    }
    else if (counter[2] === -200) {
      counter[2] += slideMoves[2][2];
      shift(slideArray[2], counter[2]);
    }     
  }	//forward button listener end
  
  else if (e.target.textContent === 'Back')	{
		 if (counter[0] === 0) {
      counter[0] -= slideMoves[0][2];
      shift(slideArray[0], counter[0]);
    }
    else if (counter[0] === 200) {
      counter[0] -=...