Слайдер с миниатюрами
Народ, подскажите пожалуйста подобный слайдер, либо может решение
уже весь нет перерыл, ничего не могу найти суть такова слева миниатюры, справа большое изображение при клике на миниатюру, в большом окне появляется эта миниатюра есть некое решение, но оно не совсем подходит по причине того, что я пытаюсь прикрутить на большое окно 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. |