CSS/JS 滑块与循环的问题

我对 CSS/JS 滑块有问题。我使用了简单的方法来使其工作 - 较大的元素（container）在较小的（area）中隐藏溢出。我在滑块上方有按钮 btn 和 btn2 来控制更大元素的移动 （ containter ）

问题是它只能在到达"第一张幻灯片"（蓝色）之前起作用，然后无法滑动到第二张幻灯片（红色）。

小提琴：https://jsfiddle.net/26r32hb6

var button = document.querySelector('.btn');
var button2 = document.querySelector('.btn2');
var container = document.querySelector('.container');
button.style.background = 'blue';
button2.style.background = 'blue';
container.style.backgroundColor = 'blue';
button.onclick = function() {  
   if (container.style.left == 0) {  
     container.style.left = '-100.5%';    
     container.style.backgroundColor = 'red';     
     button.style.backgroundColor = 'red';
     button2.style.backgroundColor = 'red';}
else if (container.style.left == '-100.5%') {
  container.style.left = '-200.5%';
  container.style.backgroundColor = 'purple';   
  button.style.backgroundColor = 'purple'; 
  button2.style.backgroundColor = 'purple';    
}
};
button2.onclick = function() {
  if (container.style.left == '-100.5%') { 
    container.style.left = 0; 
    container.style.backgroundColor = 'blue';  
    button.style.backgroundColor = 'blue';
    button2.style.backgroundColor = 'blue';}
  else if (container.style.left == '-200.5%') { 
    container.style.left = '-100.5%';
    container.style.backgroundColor = 'red';      
    button.style.backgroundColor = 'red';
    button2.style.backgroundColor = 'red';
}
};

.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;
}
.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;
}

<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>