Задать вопрос
@Shadowman69
Верстать или не верстать - вот в чем вопрос?
javascript

Верстка слайдера, как такое сверстать?

Доброго времени суток!
Есть следующий скрин:
5b3534c6d683c328200650.png
У меня 2 вопроса по этому:
1. Как по-умному сверстать эту плашку под стрелкой-переключателем? Сама стрелка будет иметь position: absolute, а как тогда плашку центрировать? И как ее сделать?
2. В слайдере 2 крайних элемента имеют прозрачность, как такое сделать, чтоб при переключении слайдера всегда эти 2 крайние элемента имели прозрачность?
Планирую делать слайдер через Slick Slider.

Буду благодарен за любую помощь по делу.
  • Вопрос задан
  • 1073 просмотра
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 3
Ankhena
@Ankhena Куратор тега JavaScript
Нежно люблю верстку
Центрирование:
position: absolute;
  top: 50%;
  transform: translateY(-50%);

Сделать: border-radius: 50% и полупрозрачный серый фон, уголок - svg'шка
Ответ написан
1 комментарий
1 комментарий
B_Roma
@B_Roma
Я думаю легче это будет, если не сами слайды будут прозрачными, а сверху этих слайдов будут блоки полупрозрачные
Ответ написан
3 комментария
3 комментария
ProjectSoft
@ProjectSoft
Front-end && Back-end разработчик
Сразу со второго вопроса.
Как вариант. Но для каждого брекпоинта (@media) писать нужные (иные) условия, если требуется для адаптации
jsfiddle.net/mo5Ljkf2

По первому вопросу проблем вообще не вижу. Стандартная вёрстка.
А дизайнеру за центрирование по жопе надавать )))
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Лидсканнер\парсер для Telegram по поиску заказов по ключевым словам
25 апр. 2024, в 14:26
6000 руб./за проект
Разработать дизайн продающего лендинга
25 апр. 2024, в 14:21
15000 руб./за проект
Шаблон WP - настройка
25 апр. 2024, в 14:07
20000 руб./за проект
Ещё заказы