Слайдер с миниатюрами
 

Народ, подскажите пожалуйста подобный слайдер, либо может решение
уже весь нет перерыл, ничего не могу найти

суть такова
слева миниатюры, справа большое изображение
при клике на миниатюру, в большом окне появляется эта миниатюра

есть некое решение, но оно не совсем подходит по причине того, что я пытаюсь прикрутить на большое окно fancybox, что бы по нажатию это изображение всплывало
а туда миниатюры подставляются через класс, а мне нужно задать каждой картинке ссылку

Можно так сделать

<slider>
<div class="slides">
  <img src="http://placehold.it/300/ccc" alt="" data-big="http://placehold.it/300/ccc_big">
  <img src="http://placehold.it/300/cfc" alt="" data-big="http://placehold.it/300/cfc_big">
  <img src="http://placehold.it/300/cdf" alt="" data-big="http://placehold.it/300/cdf_big">
</div>
<img src="http://placehold.it/300" class="bg">
</slider>

let images = document.querySelectorAll(".slides img").forEach(function (el){
  el.onclick = function (){
    document.querySelector(".bg").src = el.dataset.big
  }
})

А так даже лучше

document.querySelector(".slides").onclick = (ev) =>{
  if (ev.target.nodeName == 'IMG')
     document.querySelector(".bg").src = ev.target.dataset.big
  }