3dartmax,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
box-sizing: border-box;
}
.slider {
background-color: rgba(229, 255, 248, 0.28);
width: 500px;
height: 500px;
align-content: center;
display: flex;
justify-content: space-around;
padding: 15px;
border: 1px solid black;
}
.preview {
width: 300px;
height: 400px;
position: absolute;
padding: 10px;
border: 1px solid black;
text-align: center;
color: white;
z-index: 1;
opacity: .3;
transition: all .8s ease-in-out;
}
.contrl {
position: relative;
width: 100px;
height: 400px;
border: 1px solid rgba(70, 243, 19, 0.58);
margin-left: 350px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btn.red, .preview.red {
background-color: red;
}
.btn.yellow, .preview.yellow {
background-color: #fffb1d;
}
.btn.green, .preview.green {
background-color: #5dc35e;
}
.btn.blue, .preview.blue {
background-color: #655bc3;
}
.btn{
width: 75px;
height: 75px;
border: 1px solid black;
margin: 10px;
color: white;
transition: all .3s ease-in-out;
}
.preview.act{
z-index: 10;
opacity: 1;
}
.btn.act {
border-radius: 12px;
border-width: thick;
}
:focus{
outline:0;
}
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var content = document.querySelector(".slider");
content.addEventListener("click", function(event) {
var target = event.target;
if (target = target.closest(".btn")) {
event.preventDefault();
var a = content.querySelectorAll(".btn");
var img = content.querySelectorAll(".preview");
var selected = [].indexOf.call(a, target);
[].forEach.call(a, function(el, i) {
(i == selected) ? (el.classList.add("act"), img[i].classList.add("act")):
(el.classList.remove("act"), img[i].classList.remove("act"))
})
}
})
});
</script>
<body>
<div class="slider">
<div class="preview red act">Red</div>
<div class="preview yellow">Yellow</div>
<div class="preview green">Green</div>
<div class="preview blue">Blue</div>
<div class="contrl">
<button class="btn red act">Red</button>
<button class="btn yellow">Yellow</button>
<button class="btn green">Green</button>
<button class="btn blue">Blue</button>
</div>
</div>
</body>
</html>