Толулоп Мумуней, инженер-программист, разработчик полного стека, инструктор Udemy

Узнайте, как сделать красивую фотогалерею на JavaScript

Программисты и кодеры JavaScript, в этой статье я проведу вас через пошаговый процесс использования JavaScript для создания интеллектуальной фотогалереи и слайдера изображений.

Обратите внимание, что мы будем использовать некоторые новые JS-функции ES6, в частности, современные методы Array. Этот формат кода гарантирует, что ваша фотогалерея будет достаточно умной, чтобы вносить изменения в количество изображений, просто добавляя элемент для изображений в HTML.

Это означает, что пользователи приложения Image Slider могут просто добавлять изображения непосредственно в сценарий HTML, не заморачиваясь с кодом JavaScript.

Инициализация HTML/CSS

Вы хотите начать с создания элементов изображения в файле HTML. Эти элементы div, конечно же, будут содержать изображения, которые вы хотите включить в слайдер. Убедитесь, что все элементы div имеют одно и то же имя класса и находятся в одинаковом положении, даже перекрывая друг друга, так как это будет полезно, когда мы начнем работать с кодом JavaScript.

Затем вы хотите создать кнопку со стрелкой вперед и назад. Чтобы реализовать это, я рекомендую вам использовать «position: absolute;» как один из атрибутов в наборе правил CSS, поскольку это гарантирует, что кнопки не будут мешать положению изображений. Вы также хотите использовать атрибут CSS «z-index», чтобы кнопки оставались перекрывающими все изображения. Вы будете создавать стрелку вперед и стрелку назад.

Кнопка Points, которая указывает, какое изображение находится в шоу, также должна быть создана, но пока скрыта с помощью свойства CSS «display: none», так как нам понадобится JS, чтобы решить, сколько из этих точек должно существовать.

JavaScript

Теперь начинается самое интересное! Вы можете начать это, выбрав нужные имена классов и сохранив их в переменной. Не обязательно, но это делает взаимодействие с HTML-элементами проще и менее запутанным.

В качестве первого шага мы будем вызывать функцию Amazing JavaScript forEach(). Все элементы, содержащие изображения, будут перебираться с помощью функции document.querySelectorAll() и forEach(). Во всех итерациях мы будем назначать стиль «преобразование: перевод», чтобы перемещать эти элементы в исходное положение. Мы также добавим «pointsContainer.insertAdjacentHTML(‘beforeend’, `’’`)», чтобы добавлять точки по мере необходимости для пользовательского интерфейса.

Это необходимо, чтобы JS определял начальное положение всех изображений в зависимости от количества изображений в HTML. Логически, способ реализовать это — назначить «100 x индекс элемента» для каждого элемента в массиве списка узлов. forEach() получит для нас свой индекс во время цикла. Это гарантирует, что при запуске приложения все изображения автоматически перемещаются в исходное положение.

Удивительное свойство набора данных JavaScript

Затем во время начального цикла добавьте строку, которая добавляет атрибут data-anyName к каждому элементу. Значение атрибута будет индексом элемента в массиве списка узлов, и позже к нему можно будет получить доступ с помощью свойства набора данных JavaScript. Нам также нужно создать массив slidesArr, который будет содержать все значения свойства преобразования.

Массив slidesArr поможет нам создать выражение функции resetSlides(), которое возвращает все изображения в исходное положение, когда мы доходим до конца слайдов. Для этого мы используем метод Array map(). Карта создает новый массив из исходного массива, а затем помещает значения обратно в значение преобразования, которое мы изначально присвоили. Затем функция может быть вызвана в любое время в коде по мере необходимости.

JS Выслушай меня!

Метод addEventListener()

Взаимодействие с приложением начинается с нажатия кнопок со стрелками, поэтому к обеим этим кнопкам будет добавлен прослушиватель событий щелчка. При нажатии на переднюю часть стрелки мы хотим, чтобы JS сначала очистил непрозрачность во всех точках, чтобы мы могли назначить более высокую непрозрачность для отображаемого изображения. Массив forEach() вычитает 100 из каждого свойства преобразования translateX и соответствующим образом обновляет slidesArr.

Для стрелки, нажатой назад, forEach() делает то же самое, за исключением того, что на этот раз она добавляет 100 к значению translateX.

Не забудьте включить оператор if/else для сброса всех слайдов назад в последнем изображении, что логически означает, что последнее изображение будет иметь свойство «transform: translateX(0%)».

И мы закончили! С этой логикой JavaScript достаточно умен, чтобы назначить соответствующее значение преобразования для их начальной позиции и количество точек местоположения для пользовательского интерфейса, когда изображение добавляется в HTML.

Pro-Tip: Идея этого кода заключается в том, чтобы никогда не жестко кодировать какое-либо значение. Позвольте JS решать динамически, и ваше приложение-слайдер или фотогалерея будут работать нормально.

Спасибо, что пришли на Ted Talk.

Вы можете найти чит-код для этого приложения, включая код HTML, CSS и JavaScript, в моем репозитории Github — https://github.com/totxprex/Smart-Image-Slider-App.git.

С объясненной здесь логикой код в репозитории git определенно будет вам понятен.

Не забудьте подписаться на мой Github Profile, чтобы узнать больше чит-кодов.

Найдите меня в LinkedIn.

Чао!