Продолжаем создавать слайдер на чистом javascript. В этом видео научимся переключать слайды с помощью пагинации. Вся логика переключения будет в javascript.
Поддержать канал:
https://boosty.to/webpacman/donate
https://www.tinkoff.ru/rm/shevchuk.vi...
https://www.donationalerts.com/r/webp...
Подписывайтесь и ставьте лайк, приятного просмотра!
Также обязательно подпишись на мой телеграм канал, там будет много общения и ответов на вопросы!
https://t.me/webpacman
https://boosty.to/webpacman
------------------------------------------------
Ссылки:
Основные этапы отрисовки страницы в веб-браузере: https://doka.guide/tools/how-the-brow...
Преобразование типов при сравнении: https://learn.javascript.ru/comparison
GitHub: https://github.com/webpacman/webpacma...
GitHub Pages: https://webpacman.github.io
Код урока: https://github.com/webpacman/webpacma...
Тайминг:
00:00 - Вступление
00:31 - Добавляем событие клика по пагинации. Обработка callback функций
03:21 - Универсальная функция для смены активного элемента
05:56 - Реализация перелистывания слайдов. Основы этапов отрисовки страницы в браузере
10:00 - Центрирование слайдов, параметр centered (можно пропустить)
11:29 - Правка активности первого элемента
11:57 - Правка отображения нескольких слайдеров. Тернарный оператор. Логический оператор ИЛИ
15:07 - В чём разница между === и == ? Строгое и не строгое сравнение
15:46 - Заключение
Музыка:
Dead Pacman by N3rgul
Track: Coastline — Ason ID [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Coastline — Ason ID | Free Background Musi...
Free Download / Stream: https://alplus.io/_coastline
------------------------------------------------
Привет! Меня зовут Виталий Шевчук, я веб-разработчик. Свой путь в разработке сайтов я начал ещё в школе, создавая форумы для игр. К текущему времени я получил много опыта в разработке сайтов и очень хочу им поделиться с вами!
------------------------------------------------
Telegram: https://t.me/webpacman
Сайт: http://vshevchuk.ru/
Теги: #js #javascripttutorial #slider #html #css