Как переключать .active между блоками?

var btn = document.querySelector(".btn"); 
var blocks = document.querySelectorAll(".block"); 
var activeBlock = document.querySelector(".block.active"); 
btn.onclick = function() { 
  var index = [].indexOf.call(blocks, activeBlock); 
  // Следующий 
  if (index == blocks.length - 1) { 
    index = 0; 
  } else { 
    ++index; 
  } 
  activeBlock = blocks[index]; 
  blocks.forEach((block, i) => block.classList[i==index?'add':'remove']('active')) 
};

.main{ 
	width: 100%; 
	height: 800px; 
	background-color: grey; 
	overflow: hidden; 
} 
.block{ 
	width: 500px; 
	height: 500px; 
	background-color: red; 
	display: none; 
	margin: 100px auto; 
} 
.red{ 
	background-color: red; 
} 
.black{ 
	background-color: black; 
} 
.green{ 
	background-color: green; 
} 
.active{ 
	display: block; 
}

<button class="btn">button</button> 
<div class="main"> 
  <div class="block red active"></div> 
  <div class="block black"></div> 
  <div class="block green"></div> 
</div>

let button = document.querySelector('.btn'), 
    blocks = Array.from(document.querySelectorAll('.block')), 
    pointer = 0; 
     
button.addEventListener('click', function(){ 
  // Убираем прошлый блок 
  blocks[pointer].classList.remove('active'); 
   
  if(pointer + 1 >= blocks.length) 
    pointer = 0; 
  else 
    pointer++; 
   
  // Отмечаем новый блок 
  blocks[pointer].classList.add('active'); 
});

.main{ 
	width: 100%; 
	height: 800px; 
	background-color: grey; 
	overflow: hidden; 
} 
.block{ 
	width: 500px; 
	height: 500px; 
	background-color: red; 
	display: none; 
	margin: 100px auto; 
} 
.red{ 
	background-color: red; 
} 
.black{ 
	background-color: black; 
} 
.green{ 
	background-color: green; 
} 
.active{ 
	display: block; 
}

<button class="btn">button</button> 
<div class="main"> 
    <div class="block red active"></div> 
    <div class="block black"></div> 
    <div class="block green"></div> 
</div>