React: решение интересной практической задачи | DevsDay.ru

IT-блоги React: решение интересной практической задачи

habr.com 28 ноября 2022 г. aio350




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


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


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


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

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


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

Читать дальше →

Источник: habr.com

Наш сайт является информационным посредником. Сообщить о нарушении авторских прав.

Блог компании Timeweb Cloud Разработка веб-сайтов JavaScript ReactJS javascript react.js reactjs react task problem.задача проблема table slider таблица слайдер sync синхронизация