Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Слайдер с миниатюрами (https://javascript.ru/forum/misc/79953-slajjder-s-miniatyurami.html)

andrey8501 09.04.2020 22:34

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

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

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

voraa 10.04.2020 13:23

Цитата:

Сообщение от andrey8501 (Сообщение 522581)
есть некое решение, но оно не совсем подходит по причине того, что я пытаюсь прикрутить на большое окно 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
  }


Часовой пояс GMT +3, время: 09:31.