Пример слайдера, управляемого только с помощью CSS3

Пример слайдера, управляемого с помощью CSS3

СЛАЙД 1

или например список товаров, если бы это был модуль оформления заказа

здесь пример работы такого модуля, только на JavaScript

СЛАЙД 2

или например ввод адреса доставки, если бы это был модуль оформления заказа

здесь пример работы такого модуля, только на JavaScript

СЛАЙД 3

или например выбор способа оплаты, если бы это был модуль оформления заказа

здесь пример работы такого модуля, только на JavaScript

СЛАЙД 4

или например завершение заказа, если бы это был модуль оформления заказа

здесь пример работы такого модуля, только на JavaScript

слайд: не выбран выбран просмотр других: по наводке по клику

Открыть страницу заново, чтобы ещё раз посмотреть смену уведомлений, связанных с событием "Выбор слайда".

Обратите внимание, что:

- кнопки просмотра находятся вне DOM-ветки слайдера;

- нажатая кнопка остаётся подсвеченной;

- ненажатые кнопки демонстрируют свой слайд на время подвода курсора и возвращают показ прежнего выбранного слайда, если кнопку так и не нажали;

- данная функция отключается / включается флажком, размещенным над кнопками;

- слайдер удерживает показ выбранного слайда даже после отвода курсора от нажатой кнопки;

- строка состояния отображает текущие настройки;

- работоспособные спойлеры;

- выпадающие панели по бокам слайдера, а тумблеры панелей меняют свой вид (стрелки влево-вправо) согласно текущему состоянию панели.

Вся эта логика работает без использования JavaScript, на одном лишь CSS3! С появлением CSS4 можно будет реализовать ещё больше при меньших ограничениях и упростить html-код.

Анимация смены слайдов и переключения уведомлений использована простейшая - показать / скрыть. В данном примере это не существенно. Но в принципе могла быть и более красивее, причём опять же средствами CSS (скажем нечто в духе animate.css).

Недостатки, "навязанные" CSS3:

- особенности обобщенного родственного селектора (~) вынуждают располагать управляющий элемент в html-разметке ранее управляемой части контента;

- те же особенности селектора не дают размещать управляющий элемент в глубине другой DOM-ветки, чтобы он не имел прямого соседства с DOM-веткой управляемого контента;

- отсутствие селектора прямого родителя вынуждает выносить теневой флажок перед кнопкой в html-разметке и добавлять во флажок и кнопку лишние атрибуты, только чтобы указать их связанность, а также порождает лишние конструкции в стилях;

- проблема разрозненности теневого флажка и кнопки может быть решена и в CSS3 за счёт отказа от кнопки и превращения флажка в неё (более точно, кнопку подменит псевдо элемент :before или :after), однако не все браузеры поддерживают такое превращение, чтобы не примешивать туда свою "отсебятину".