TheSanches,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{
position: relative;
}
.header__bg{
opacity: 0;
transition: 1s;
display: block;
position: absolute;
}
.header__bg_show{
opacity: 1;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.header__btn-left').addEventListener('click', sliderLeft);
let headerBg = document.querySelectorAll('.header__bg');
let idx = 0;
function sliderLeft(){
headerBg[idx].classList.remove('header__bg_show');
++idx;
if(idx == headerBg.length) idx = 0;
headerBg[idx].classList.add('header__bg_show');
}
});
</script>
</head>
<body><input name="" type="button" value="next" class="header__btn-left">
<img class='header__bg header__bg_show' src="http://placeimg.com/400/200/people?r=1">
<img class='header__bg' src="http://placeimg.com/400/200/people?r=2">
<img class='header__bg' src="http://placeimg.com/400/200/people?r=3">
</body>
</html>