Carousel

by Tom M

HTML

<div id='container'>
  <div id='one' class='slide'></div>
  <div id='two' class='slide'></div>
  <div id='three' class='slide'></div>
</div>
<div id='buttonContainer'>
<button id='back'>back</button>
<button id='forward'>forward</button>
<button id='playPause'>play/pause</button>
</div>

CSS

.slide, #container {
  width: 200px;
  height: 200px;
}

.slide {
  display: none;
}


#one {
  background-color: yellow;
}

#two {
  background-color: green;
}

#three {
  background-color: black;
}

JavaScript

let slides = document.getElementsByClassName('slide');
let slidesLength = slides.length;
let buttonContainer = document.getElementById('buttonContainer');
let playButton = document.getElementById('playPause');
let classes = playButton.classList;

function slideSelect(index) {
  for (let i = 0; i < slidesLength; i++) {
    if (i !== index) {
    slides[i].style.display = 'none';
    } else {
    slides[index].style.top = '20px';
    slides[index].style.display = 'block';
   
    }
    console.log(index);
  }	//end for loop
}	//end slideSelect function

let counter = 0;
let timer;

function auto() {
	if (counter === slidesLength -1) {
  	counter = 0;
  }
  else if (counter !== slidesLength -1) {
		counter += 1;
  }
	slideSelect(counter);  
  timer = setTimeout(auto, 2000);  
}

window.onload = setTimeout(auto(), 2000);

  	function toggle() {
    	let result = classes.toggle('active');
      if (result) {
      	clearTimeout(timer);
      } else {
      auto();
      }
    }

buttonContainer.addEventListener('click', function(e) {
	if (e.target.textContent === 'forward') {
  	if (counter !== slidesLength - 1) {
      counter += 1;
      } else {
      counter = 0;
      }
  } else if (e.target.textContent === 'back'){
      if (counter !== 0) {
      counter -= 1;
      } else {
      counter = slidesLength - 1;
      }
  }   
    slideSelect(counter);
    console.log(counter);  
     
  if (e.target.textContent === 'play/pause') {
    toggle();
  }
})