"Рекламный макет подсознательно экономит JavaScript" - макет для вёрстки
"Не стоит чинить то, что работает" - принцип лорда Ветинари
В этой работе "экономить Javascript" требовалось вполне сознательно. Что ж, галереи картинок с переключением без Javascript-а? Вызов принят!
Создайте сайт-портфолио: расскажите о себе, своих работах и ожиданиях от Школы. Сайт должен максимально соответствовать предложенному макету. Приветствуется семантическая вёрстка и современные CSS-решения, JavaScript просьба не использовать.
Код слайдшоу немного 18+, однако же работает без единой строчки любимого языка.
Radio инпуты специально вынесены в начало блока и скрыты. Дело в том, что css-селекторы позволяют выбирать элементы, следующие за другими элементами
либо непосредственно, либо на одном уровне DOM; поместив их после картинок, я не мог бы влять на картинки, а поместив перед ними
в отдельный блок, и вытащив вниз при помощи position - не смог бы выйти селекторами за пределы этого блока.
Потому используется вся магия тега label с атрибутом for.
Слегка увеличил точки для выбора слайда, ибо в них было тяжело попасть при размере, заданном макетом.
Добавил стрелки переключения слайдов (очень уж они с точки зрения интерфейса напрашиваются).
Вёрстка резиновая.