Sliding Carousel

by Tom M

HTML

<div id='container'>
  <div id='inner_container'>
    <div id='one' class='slide'></div>
    <div id='two' class='slide'></div>
    <div id='three' class='slide'></div>
     <div id='four' class='slide'></div>
      <div id='five' class='slide'></div>
  </div>
</div>

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

CSS

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

#inner_container {
  width: 1025px;
  position: relative;
   border: 1px solid red;
}

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

#one {
  background-color: black;
}

#two {
  background-color: yellow;
}

#three {
  background-color: green;
}

#four  {
  background-color: red;
}

#five  {
  background-color: blue;
}

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

JavaScript

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

let forwardAmount = 0;
let backAmount = 0;


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

let slideArray = [square1, square2, square3, square4, square5];

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

//the values for forward & backAmount need to reset or something, it is causing problems.

button.addEventListener('click', function(e) {
	if (e.target.textContent === 'Forward') { 
  	forwardAmount += 200;
    slideArray[4].style.left = '-1000px';
		shift(slideArray[0], forwardAmount);
    shift(slideArray[1], forwardAmount);
    shift(slideArray[2], forwardAmount);
    shift(slideArray[3], forwardAmount);
    shift(slideArray[4], forwardAmount);
    let popped = slideArray.pop();
    slideArray.unshift(popped);

  }
  else if (e.target.textContent === 'Back')	{
    if (backAmount === -1000) {
    	backAmount = 0;
      slideArray[0].style.left= '0px';
      slideArray[1].style.left= '0px';
      
      slideArray[2].style.left= '0px';
      slideArray[3].style.left= '0px';
      slideArray[4].style.left= '0px';
      shift(slideArray[1], backAmount);
    }
    backAmount += -200;  
		shift(slideArray[0], backAmount);
    slideArray[0].style.left = '1000px';  
    shift(slideArray[1], backAmount);
    shift(slideArray[2], backAmount);
    shift(slideArray[3], backAmount);
    shift(slideArray[4], backAmount);
    let shifted = slideArray.shift();
    slideArray.push(shifted);
  }
})