Привет, друзья!

В данном туториале я хочу поделиться с вами опытом решения одной интересной практической задачи.

Предположим, что у нас имеется страница сравнения товаров. На этой странице отображается слайдер с карточками товаров и таблица с их характеристиками. Задача состоит в том, чтобы синхронизировать переключение слайдов и прокрутку таблицы. Условия следующие:

• ширина таблицы должна соответствовать ширине слайдера;


• ширина колонки таблицы должна соответствовать ширине слайда;


• слайды можно переключать с помощью перетаскивания, нажатия на кнопки управления и элементы пагинации;


• таблицу можно прокручивать с помощью колесика мыши (на десктопе) и перемещения указателя (на телефоне);


• при взаимодействии пользователя с одним компонентом второй должен реагировать соответствующим образом: при переключении слайда должна выполняться прокрутка таблицы, при прокрутке таблицы — переключение слайдов.

Репозиторий с кодом проекта.

Если вам это интересно, прошу под кат.

https://habr.com/ru/post/701972/?utm_source=habrahabr&utm_medium=rss&utm_campaign=701972

В этой статье я хочу затронуть задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Image Slider.

За последние 5 месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других. (Больше информации можно прочитать в моем Telegram-канале)

Вы должны реализовать этот виджет за ~45–50 минут и рассказать об оптимизации. Эту информацию я постараюсь рассказать здесь. Основная цель состоит не в том, чтобы реализовать Image Slider с большим количеством функционала, а в том, чтобы показать, как реализовать и оптимизировать.

https://habr.com/ru/post/677236/?utm_source=habrahabr&utm_medium=rss&utm_campaign=677236