Sliding Carousel Fork

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>
<button id='pp'>Play/Pause</button>
</div>

CSS

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

#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

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

let slideArray = [
document.querySelector('#one'), 
document.querySelector('#two'), 
document.querySelector('#three')
];

let counter = [0, 0, 0];

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

function indexShift(square, indexNumber) {
	square.style.zIndex = indexNumber;
}

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

button.addEventListener('click', slideMovement);
window.addEventListener('keydown', slideMovement);


function forward() {
	//square 1 - black
    if (counter[0] === 0) {	//move to position 2
      counter[0] += slideMoves[0][0];
      shift(slideArray[0], counter[0]);
      indexShift(slideArray[0], '1');
    }
    else if (counter[0] === 200) {	//move to position 3
      counter[0] += slideMoves[0][1];
      shift(slideArray[0], counter[0]);
      indexShift(slideArray[0], '1');
    }
    else if (counter[0] === 400) {	//back to position 1
      counter[0] += slideMoves[0][2];
      shift(slideArray[0], counter[0]);
      indexShift(slideArray[0], '0');
    } 
    //square 2 -yellow
    if (counter[1] === 0) {	//move to position 3
      counter[1] += slideMoves[1][0];
      shift(slideArray[1], counter[1]);
      indexShift(slideArray[1], '1');
    }
    else if (counter[1] === 200) {	//back to position 1
      counter[1] += slideMoves[1][1];
      shift(slideArray[1], counter[1]);
      indexShift(slideArray[1], '-1');
    }
    else if (counter[1] === -200) {	//move to position 2
      counter[1] += slideMoves[1][2];
      shift(slideArray[1], counter[1]);
      indexShift(slideArray[1], '1');
    }
    //square 3 - green
    if (counter[2] === 0) {	//back to position 1
      counter[2] += slideMoves[2][0];
      shift(slideArray[2], counter[2]);
      indexShift(slideArray[2], '0');
    }
    else...