Как сверстать активный буллет для слайдера?

Question

[Vitaly Max]

Есть слайдер с переключателями..

Не могу понять как лучше сверстать активный буллет..

Если с обычным все понятно

width: 5px;
heigth: 5px;
border: 1px solid #ffffff;

Как сделать активный буллит, есть идеи?

Comments

[Rustam Bainazarov]

Псевдоэлемент для внешней окружности.

[Vitaly Max]

Рустам Байназаров, спасибо

[Rustam Bainazarov]

Vitaly Max,

[Rustam Bainazarov]

Xdevelx, из-за непрозрачного фона между телом буллита и кружком:



Ну и дополнительно получаем возможность анимировать как хотим этот кружок, если он отдельным элементом.

Если этих задач не стоит, то можно и box-shadow. Но я на всякий всегда делаю псевдоэлементом такие вещи.

[Rustam Bainazarov]

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

Словом, можно использовать что угодно, что решает задачу.

Answer 1

[Andrew Ghostuhin]

Понятие адаптивный для данного объекта не очень применимо, оно может быть применимо к его родителю, то есть контейнеру.
https://github.com/AtlantisUnited/uikit/blob/dev/s... Вот моя реализация, если реакт тебе не нужен - то можешь взять только JSS секцию

Comments

[Vitaly Max]

спасибо, но это не про адаптив тема =)

[Andrew Ghostuhin]

Vitaly Max, криво прочёл, но, тем не менее - там есть и активное состояние буллита