React: решение интересной практической задачи
|
|
Понедельник, 28 Ноября 2022 г. 17:01
+ в цитатник
Привет, друзья!
В данном туториале я хочу поделиться с вами опытом решения одной интересной практической задачи.
Предположим, что у нас имеется страница сравнения товаров. На этой странице отображается слайдер с карточками товаров и таблица с их характеристиками. Задача состоит в том, чтобы синхронизировать переключение слайдов и прокрутку таблицы. Условия следующие:
- ширина таблицы должна соответствовать ширине слайдера;
- ширина колонки таблицы должна соответствовать ширине слайда;
- слайды можно переключать с помощью перетаскивания, нажатия на кнопки управления и элементы пагинации;
- таблицу можно прокручивать с помощью колесика мыши (на десктопе) и перемещения указателя (на телефоне);
- при взаимодействии пользователя с одним компонентом второй должен реагировать соответствующим образом: при переключении слайда должна выполняться прокрутка таблицы, при прокрутке таблицы — переключение слайдов.
Репозиторий с кодом проекта.
Если вам это интересно, прошу под кат.
Читать дальше → https://habr.com/ru/post/701972/?utm_source=habrahabr&utm_medium=rss&utm_campaign=701972
Метки:
javascript
проблема
таблица
синхронизация
table
слайдер
task
slider
sync
разработка веб-сайтов
react
react.js
reactjs
блог компании timeweb cloud
problem.задача
-
Запись понравилась
-
0
Процитировали
-
0
Сохранили
-