Галерея с круговым, анимированным слайдером без библиотек на чистом JavaScript. Для новичков.

YOUTUBE · 01.12.2025 09:35

Ключевые темы и таймкоды

Обзор галереи

0:07
  • Видео рассказывает о создании галереи на сайте с использованием чистого JavaScript.
  • Галерея имеет адаптивный дизайн, анимацию и возможность перелистывания фотографий с помощью кнопок.

Создание кода

5:46
  • Объявляются переменные для карточек, слайдера, кнопок и функции для показа фотографии.
  • Функция "showPic" получает фотографию из коллекции и клонирует ее, затем добавляет в слайдер.
  • Функция для обработки кнопок "changePic" получает направление и обрабатывает его, изменяя индекс карточки в зависимости от направления.
  • Если индекс равен нулю, то функция переходит к последней фотографии, если меньше нуля - к первой.
  • Если значение не равно лефт или райт, функция возвращает ошибку.
  • После обработки направления, функция показывает новую фотографию.

Замена фотографий в слайдере

14:04
  • В видео автор объясняет, как заменить фотографии в слайдере, используя свойство "реплей" и функцию "клоу слайдер".
  • Он также демонстрирует, как закрыть слайдер, удаляя фотографии при закрытии.

Тестирование и завершение

15:21
  • Автор тестирует слайдер, показывая, что он работает правильно.
  • Он завершает создание слайдера, добавляя класс "хида" на кнопку "клоус" и функцию "клоу слайдер" на кнопку "клоус".
  • В конце автор благодарит зрителей за просмотр и призывает их подписаться, ставить лайки и удачи.