Доработка вестки страницы матча
Добрый день!
Нужна помощь опытного верстальщика, который сможет качественно досверстать слайдер на уже сверстанной странице матча на сайте анализатора спортивных событий.
Что нужно: развернуть локально архив верстки предыдущего исполнителя и доработать блок слайдера, которы он так и не смог реализовать. Нам не нужно верстать ВСЮ страницу, речь идет только одоработке блока слайдера коэффициентов и проверки того что все работает на десктопе и мобильном устройстве.
Макет:
https://www.figma.com/design/M3myq5soLJeVAryu1LeRbj/BetLab-Main?node-id=77-3753&p=f
Страница которую нужно доработать:
https://prnt.sc/8Scng3S4-ylg
Блок слайдера коэффициентов:
https://prnt.sc/jarXbxK52FPm
Доработка возможна на таких технологиях:
Tailwind CSS
Bootstrap
Чистый CSS
Но важно учесть, что верстка будет натягиваться на компоненты Vue.js, и будет большим плюсом если вы знаете и работаете с Vue.
Контент страницы состоит из 2 вкладок: коэффициенты и статистика.
Это вкладки, которые должны переключать отображение контента в них.
Это все реализовано, нужна небольшая доработка по блоку слайдера.
Есть нюансы, которые не смог реализовать предыдущий верстальщик:
Особое внимание нужно обратить на столбцы в вкладке Коэфиициенты. Над столбцами есть кнопки-ссылки, которые при клике на них должны горизонтально скроллить столбцы и выбранная ссылка должна отобразить столбец в зоне видимости пользователя (рядом с фиксированным столбцом). По сути нужно интегрировать слайдер, который горизонтально будет скроллить столбцы при нажатии на ссылки.
При скролле столбцов мышкой (зажатие и перетаскивание столбцов) - ссылки также должны переключаться (active-not active).
Важно: Самы первый столбец "Результат LIVE матча" должен быть зафиксирован и не скроллиться. Все остальные столбцы горизонтально скроллятся "под первый столбец" в зависимости от выбранной ссылки.
Эта страница - только первая из серии доработок (редизайна) проекта, поэтому если вы хорошо справитесь с задачей - возможна постоянная работа по верстке новых страниц.
Присылайте заявку с вашим бюджетом.
Спасибо!