[TheSanches]

Доброго времени суток, делаю слайдер работающий по клику, логика реализована на удалении и присвоении классов к картинкам, но классы присваиваются сразу двум картинкам, а нужно чтобы присваивались по очереди после каждого клика, я так понимаю что нужно выйти из цикла, но не могу реализовать работающий код, подскажите как это правильно сделать.

<img class='header__bg' src="img/background.jpg">
<img class='header__bg header__bg_show' src="img/background2.jpg">
<img class='header__bg header__bg_show' src="img/background3.jpg"> <!-- header__bg_show opacity :0; -->

document.querySelector('.header__btn-left').addEventListener('click', sliderLeft);
let headerBg = document.querySelectorAll('.header__bg');
function sliderLeft(){
	headerBg.forEach(function(item){
		item.classList.contains('header__bg_show') == true ? 
                item.classList.remove('header__bg_show') : 
                item.classList.add('header__bg_show');
	});
}