var oViewImage = document.querySelector('.view_image');
var aImages = Array.prototype.slice.call(document.querySelectorAll('.main_wraper > img'));
var aArrow = document.querySelectorAll('.view_wraper > a');
aImages.forEach(function(item, index) {
item.addEventListener('click', function() {
oViewImage.style.backgroundImage = 'url(' + this.src + ')';
if (oSel = document.querySelector('.thumb-select')) {
oSel.classList.remove('thumb-select')
};
this.classList.add('thumb-select');
aArrow[0].classList.remove('thumb-hide');
aArrow[1].classList.remove('thumb-hide');
if (index == 0) {
aArrow[0].classList.add('thumb-hide');
}
if (index == aImages.length - 1) {
aArrow[1].classList.add('thumb-hide');
}
});
});
aArrow[0].addEventListener('click', function() {
let i = aImages.length;
while (i--) {
if (aImages[i].classList.contains('thumb-select')) break;
}
if (i > 0) {
aImages[i - 1].dispatchEvent(new Event('click'));
if (aImages[i - 1].classList.contains('thumb-hide')) {
aImages[i - 1].classList.remove('thumb-hide');
}
}
});
aArrow[1].addEventListener('click', function() {
let i = aImages.length;
while (i--) {
if (aImages[i].classList.contains('thumb-select')) break;
}
if (i < aImages.length - 1) {
aImages[i + 1].dispatchEvent(new Event('click'));
if (i + 1 > 7) {
aImages[i - 7].classList.add('thumb-hide');
}
}
});
aArrow[1].dispatchEvent(new Event('click'));
:root {
--main-color: #333;
--main-width: 600px;
}
* {
box-sizing: border-box;
}
.main_wraper {
background: var(--main-color);
height: calc(var(--main-width) / 1.75);
margin: 20px auto;
overflow: hidden;
position: relative;
width: var(--main-width);
}
.main_wraper>img {
background: radial-gradient(#fff, var(--main-color));
float: left;
height: 25%;
padding: 15px;
position: relative;
transition: all 0.5s ease-out;
width: 20%;
}
.main_wraper>img:hover {
cursor: pointer;
padding: 3px;
transition: all 0.3s ease-out;
}
.view_wraper {
background: radial-gradient(#fff, var(--main-color));
float: right;
height: 75%;
position: relative;
right: 0;
top: 0;
width: 80%;
}
.view_image {
background: transparent no-repeat center;
background-size: contain;
height: 100%;
margin: 0 auto;
width: 100%;
}
.thumb-select {
filter: grayscale(100%);
opacity: .2;
pointer-events: none;
}
.thumb-hide {
display: none;
}
.arrow_wrap {
background: rgba(255, 255, 255, .3);
border: 4px solid rgba(255, 255, 255, .6);
border-radius: 20px;
box-shadow: 1px 4px 20px -5px #000 inset;
color: rgba(255, 255, 255, .8);
cursor: pointer;
font: 24px/32px 'Arial';
height: 40px;
outline: none;
position: absolute;
text-align: center;
text-decoration: none;
top: 50%;
user-select: none;
width: 40px;
}
.arrow_wrap:hover {
color: rgba(255, 255, 255, 1);
text-shadow: 1px 2px 6px #000;
}
.arrow_wrap:active {
text-shadow: 0 0 1px #000;
}
.arrow-rew {
left: 20px;
}
.arrow-fwd {
right: 20px;
}