слайдер с миниатюрами внизу и сбоку

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; 
}

<div class="main_wraper"> 
  <div class="view_wraper"> 
    <div class="view_image"></div> 
    <a href="#" class="arrow_wrap arrow-rew">&#9668;&nbsp;</a> 
    <a href="#" class="arrow_wrap arrow-fwd">&nbsp;&#9658;</a> 
  </div> 
  <img src="http://via.placeholder.com/160x120/ffaaaa/ffffff?text=1" alt=""> 
  <img src="http://via.placeholder.com/160x120/ffcc66/ffffff?text=2" alt=""> 
  <img src="http://via.placeholder.com/160x120/00CED1/444444?text=3" alt=""> 
  <img src="http://via.placeholder.com/160x120/66bb66/ffffff?text=4" alt=""> 
  <img src="http://via.placeholder.com/160x120/6666bb/ffffff?text=5" alt=""> 
  <img src="http://via.placeholder.com/160x120/ffaaaa/ffffff?text=6" alt=""> 
  <img src="http://via.placeholder.com/160x120/ffcc66/ffffff?text=7" alt=""> 
  <img src="http://via.placeholder.com/160x120/00CED1/444444?text=8" alt=""> 
  <img src="http://via.placeholder.com/160x120/66bb66/ffffff?text=9" alt=""> 
  <img src="http://via.placeholder.com/160x120/6666bb/ffffff?text=10" alt=""> 
</div>