Использование прототипа img src в слайдере для изменения изображения слайдера

Я пытаюсь создать модальный слайдер галереи. Пока я могу открыть модальное окно с правильным изображением, используя target src. Как я могу использовать то же свойство src для изменения изображения модальных окон при щелчке, следующем или предыдущем btn?

html:

<div class = "galleryModal">

            <div class = "galleryModal__imgContainer">
                <span id = "closeModal" class = "closeBtn">&times</span>

                <img src = "/dist/images/gal1.jpg" alt = "modal main image" class = "galleryModal__img current">

                <div class = "galleryModal__controls">
                    <svg class = "prevBtn modalBtn">
                        <use xlink:href = "/dist/images/sprite.svg#icon-play3"></use>
                    </svg>
                    <svg class = "nextBtn modalBtn">
                        <use xlink:href = "/dist/images/sprite.svg#icon-play3"></use>
                    </svg>
                </div>
            </div>

        </div>

JS:

let myImages = document.querySelectorAll('.gallery__img');
let modal = document.querySelector('.galleryModal');
let closeBtn = document.querySelector('.closeBtn');
let current = document.querySelector('.current');
let next = document.querySelector('.nextBtn');
let prev = document.querySelector('.prevBtn');

console.info(myImages);


//OPEN MODAL ON IMAGE CLICK
myImages.forEach(img => {
    img.addEventListener('click', (e) => {
        modal.style.display = 'block';
        current.src = e.target.src;
    })
})

//CLOSE MODAL
closeBtn.addEventListener('click', () => {
    modal.style.display = 'none';
})
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
14
1

Ответы 1

Я понял, что у вас есть сетка изображений при щелчке изображения, которое вам нужно, чтобы показать это изображение во всплывающем окне, а затем при нажатии кнопки «следующий / предыдущий» отображаются другие изображения.

Проверьте этот рабочий фрагмент здесь. Попробуйте изменить свой код с помощью этого образца фрагмента. Вы легко добьетесь.

Надеюсь, это поможет.

спасибо за это, но я стараюсь избегать использования плагина, я использую это как практику, когда пишу его для себя. У меня есть так, что щелкнутое изображение появляется при открытии модального окна. Просто пытаюсь разработать наиболее эффективный способ отображения других изображений галереи при нажатии кнопки «Далее» / «Назад». Цени помощь ты.

Adam Tolaini 02.06.2018 20:07

Опс. Вы не упомянули об этом в вопросе. Итак, предоставил мое предложение.

user3599302 02.06.2018 20:08

Другие вопросы по теме