Слайдер на css — как задать стиль активной кнопке?

Question

[Евгения Сатонина]

Здравствуйте.
Реши для своей верстки использовать сей слайдер на css
слайдер

Вопрос, как активную кнопку навигации выделить другим стилем?
Когда выбран третий слайд, скажем что-бы кругляшек был красным...

Answer 1

[Дима Паутов]

Никак не сделаете, если только играться с :active или :visited у ссылки. Т.к. ссылка не хранит в себе никакого активного состояния. Такие слайдеры нужно реализовывать через input radio + label.

Как тут

Comments

[Евгения Сатонина]

Да, я его видел. Но мне нужно, что бы следуюзий слайд "выезжал" справа.

[Дима Паутов]

Евгений Сатонин: Так какая разница, откуда он выезжать будет. Поменяйте направление в стилях и всё. Механика от этого никак не зависит

[Евгения Сатонина]

Дима Турков: ок. Спасибо, буду пробовать.

[Евгения Сатонина]

Дима Турков: Чет я так и не разобрался как направление менять... Они просто появляются, но никак не 'выезжают' .

Answer 2

[ealexseen]

Хороший слайдер kenwheeler.github.io/slick можно его использовать
там и кнопки есть активные

Answer 3

[Амир Алимжанов]

какой-то дикий слайдер

Answer 4

[Pretor DH]

Решение

Основные тезы:
1. Перемещаем указатели на inner-content-# внаружу самого content;
2. Стилизируем кнопки

#content-inner-1:target #nav #button1,
#content-inner-2:target #nav #button2,
#content-inner-3:target #nav #button3,
#content-inner-4:target #nav #button4,
#content-inner-5:target #nav #button5,
#content-inner-6:target #nav #button6 { background:red; }

3. Перемещяем их внутрь последнего #inner-content-6 но не в #content