Simple Slider Test

a simple slider made only using javascript

HTML

<div class="wrapbtns">
  <div class="btn2">-X</div>
  <div class="btn">X</div>
</div>

<div class="area"><div class="container"><div class="box">a</div><div class="box">b</div><div class="box">c</div><div class="box">d</div><div class="box">e</div><div class="box">f</div><div class="box">g</div><div class="box">h</div><div class="box">i</div><div class="box">j</div><div class="box">k</div><div class="box">l</div><div class="box">m</div><div class="box">n</div><div class="box">o</div><div class="box">p</div><div class="box">q</div><div class="box">r</div></div></div>

CSS

.wrapbtns {
  width: 365px;
  height: 50px;
  background: yellow;
}

.btn {
  width: 50px;
  height: 50px;
  float: right;
}

.btn2 {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 5px;
}

.btn,
.btn2 {
  transition-duration: 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
}

.area {
  width: 365px;
  height: 250px;
  overflow: hidden;
  /* This */
  position: relative;
}

.container {
  background: blue;
  width: 1100px;
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  left: 0;
  position: absolute;
  transition-duration: 1s;
  margin-left: 0;
}

.box {
  background: yellow;
  min-width: 100px;
  height: 100px;
  margin: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 48px;
  transition-duration: 500ms;
}

JavaScript

var button = document.querySelector('.btn');
var button2 = document.querySelector('.btn2');
var container = document.querySelector('.container');
var area = document.querySelector('.area');

button.style.background = 'blue';
button2.style.background = 'blue';
container.style.backgroundColor = 'blue';

var slideCurrent = 0;
var slideTotal = Math.floor(container.offsetWidth / area.offsetWidth);
console.log("dmsoics" + slideTotal);
var slideWidth = area.offsetWidth;
var slideColors = ['blue','red','purple']

button.onclick = function() {
	
	if(slideCurrent < slideTotal - 1){
  	var myMargin = container.style.marginLeft;
    var myMarginNum = parseInt(myMargin.replace("px","")) || 0;
    container.style.marginLeft = (myMarginNum - slideWidth) + "px";
    slideCurrent += 1;
    
    container.style.backgroundColor = slideColors[slideCurrent];    
    button.style.backgroundColor = slideColors[slideCurrent]; 
    button2.style.backgroundColor = slideColors[slideCurrent]; 
  }
  
};
button2.onclick = function() {

	if(slideCurrent > 0){
  	var myMargin = container.style.marginLeft;
    var myMarginNum = parseInt(myMargin.replace("px","")) || 0;
    container.style.marginLeft = (myMarginNum + slideWidth) + "px";
    slideCurrent -= 1;
		
    container.style.backgroundColor = slideColors[slideCurrent];     
    button.style.backgroundColor = slideColors[slideCurrent]; 
    button2.style.backgroundColor = slideColors[slideCurrent]; 
  }
  
};