Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2020, 22:34
Интересующийся
Отправить личное сообщение для andrey8501 Посмотреть профиль Найти все сообщения от andrey8501
 
Регистрация: 08.10.2019
Сообщений: 10

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

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

есть некое решение, но оно не совсем подходит по причине того, что я пытаюсь прикрутить на большое окно fancybox, что бы по нажатию это изображение всплывало
а туда миниатюры подставляются через класс, а мне нужно задать каждой картинке ссылку
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2020, 13:23
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 370

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

Последний раз редактировалось voraa, 10.04.2020 в 19:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вкладки и слайдер slicks ildar94 Элементы интерфейса 6 16.01.2018 14:29
Как поместить слайдер в модальное окно? ИщуПомощь Элементы интерфейса 2 24.08.2017 20:27
Новостной слайдер на bxslider malsyst Библиотеки/Тулкиты/Фреймворки 3 02.09.2013 09:32
jquery слайдер, анимация при переключении вкладки KiTaeZa Events/DOM/Window 1 05.09.2011 19:52
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 23.07.2011 23:19