TarasL85,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.content .item{
display: none;
}
.content .item.show{
display: block;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => {
if(target = target.closest(selector)) fn(target)
});
const parent = document.querySelector(".content");
const children = parent.children;
let index = [...parent.children].indexOf(parent.querySelector(".show"));
const show = ({dataset : {up}}) => {
children[index].classList.remove("show");
index = (Number(up) + index + children.length) % children.length;
children[index].classList.add("show");
};
on(document, "click", "[data-up]", show);
});
</script>
</head>
<body>
<button data-up="-1">back</button>
<button data-up="1">forw</button>
<div class="content">
<div class="item show">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div></body>
</html>