Sliding Carousel Fork Responsive

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">
<div id='leftArrow'></div>
<div id='rightArrow'></div>
<div class= 'button play' id='playPause'></div>
<div class= 'button pause' id='pause'></div>
</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;
}

#leftArrow {
  margin: 10px;
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; 
  border-right: 20px solid black; 
}

#rightArrow {
  margin: 10px;
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; 
  border-left:20px solid black; 
}

.play {
  margin: 10px;
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; 
  border-left:20px solid black; 
}

.pause {
  width: 20px;
  height: 20px;
  border-style: double;
  border-width: 0px 0px 0px 20px;
}

JavaScript

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


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}%)`;
}

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

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

let numberOfSlides = slides.length;
let slideWidth = slideArray[0].offsetWidth;
let returnDistance = 100 * (numberOfSlides -1);

function forwardSelector(pos) {
  if (counter[pos] !== returnDistance - (100 * pos)) {
    counter[pos] += 100;
    shift(slideArray[pos], counter[pos]);
    indexShift(slideArray[pos], '1');
  } else if (counter[pos] === returnDistance - (100 * pos)){
    counter[pos] -= returnDistance;
    shift(slideArray[pos], counter[pos]);
    indexShift(slideArray[pos], '0');
  }
}

function backwardSelector(pos) {
	if (counter[pos] === (pos*-100)) {
  	counter[pos] += returnDistance;
    shift(slideArray[pos], counter[pos]);
    indexShift(slideArray[pos], '0');
  }
  else if (counter[pos] !== -(pos*100)) {
  counter[pos] -= 100;
  shift(slideArray[pos], counter[pos]);
  indexShift(slideArray[pos], '1');
  }
}

function forward() {
	for (let i = 0; i < numberOfSlides; i++) {
  	forwardSelector(i);
  }
}

function back() {
	for (let i = 0; i < numberOfSlides; i++) {
  	backwardSelector(i);
  }
}

let timer;
function auto() {
forward();
timer = setTimeout(auto, 2000)
}

function toggle() {
let result = document.getElementById('playPause').classList.toggle('active');
  if (result) {
		clearTimeout(timer);
  } else {
  	auto();
  }
}

button.addEventListener('click', function(e) {
	if (e.target.id === 'playPause') {
  	toggle();
  }
});

function slideMovement(e) {
	if (e.target.id === 'rightArrow' || e.keyCode...