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

Question

[Shadowman69]

Доброго времени суток!
Есть следующий скрин:

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

Буду благодарен за любую помощь по делу.

Answer 1

[Ankhena]

Центрирование:

position: absolute;
  top: 50%;
  transform: translateY(-50%);

Сделать: border-radius: 50% и полупрозрачный серый фон, уголок - svg'шка

Comments

[Shadowman69]

Спасибо, я уже в фотошопе сделал себе картинки)

Answer 2

[Roma]

Я думаю легче это будет, если не сами слайды будут прозрачными, а сверху этих слайдов будут блоки полупрозрачные

Comments

[Shadowman69]

Тоже думал над этим, просто немного коряво это будет - стрелочки через абсолют и полупрозрачные блоки тоже абсолютом центрированы. Надеюсь может как-то через джава скрипт это более по-человечески делается)

[Roma]

Ну я думаю этот костыль будет дополнен еще один костылем через JS =))))

[Петр Васильев]

Shadowman69, не надо js, выравнивайте стрелки и белые градиенты слоями через z index.
Абсолют хорошо центрирует с top 0 botoom 0 height unset

Answer 3

[ProjectSoft]

Сразу со второго вопроса.
Как вариант. Но для каждого брекпоинта (@media) писать нужные (иные) условия, если требуется для адаптации
jsfiddle.net/mo5Ljkf2

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

Comments

[Shadowman69]

Спасибо, Ваш код посмотрел работает, теперь тока осталось понять как, и сделать такое у себя.

[ProjectSoft]

Указываем условия для соседних селекторов. А именно для .slick-active. Для всех слайдов и четвёртого активного (.slick-active + .slick-active + .slick-active + .slick-active) - opacity: 0.5. Для второго (.slick-active + .slick-active) и третьего (.slick-active + .slick-active + .slick-active) opacity: 1
Вот и весь принцип.

[Shadowman69]

ProjectSoft, у меня заработало, спасибо Вам большое!)