Frontend Formula

💡Делаем галерею с вертикальной прокруткой



— Используйте display: flex и justify-content: center, чтобы настроить контейнер.



— Используйте display: flex и flex-direction: column для настройки слайдов.



— Скройте полосы прокрутки, используя scrollbar-width: none и стиль псевдоэлемента ::-webkit-scrollbar display: none.



— Используйте Array.prototype.map() и Array.prototype.join() для заполнения элемента .thumbnails. Присвойте каждой миниатюре атрибут data-id с индексом изображения.



— Используйте Document.querySelector() и EventTarget.addEventListener(), чтобы зарегистрировать обработчик события «прокрутки». Обновите элементы .thumbnails и .scrollbar, чтобы они соответствовали текущей позиции прокрутки, используя функцию scrollThumb.



👉 Ссылка на готовый код



#js #css #сниппет



👉 @frontend_formula