Слайдер на чистом CSS

[Schamil74]

Не работает кнопка на 1ом и 2ом слайде, а на 3ем норм. Игрался z-index, но увы безуспешно. Есть соображения? И еще момент, как менять цвет фона body при смене слайда. Например, слайд1 - фон body красный, слайд2 - фон body зеленый и тд???

Слайдер выполнем путем подмены радио кнопок.

Картинки подгружать в сам слайдер на стал, думаю и так понятно.

Спросите зачем на чистом CSS? Чтобы прокачаться по селекторам и работе слоями.

Заранее спасибо за помощь

http://www.cssdesk.com/EjsHZ

 

Edited February 8, 2017 by Schamil74

[npofopr]

Для body навряд ли что то получится.

И опять же. В сети ведь много уже готовых реализаций и примеров и инструкций по таким слайдерам. Почему не сравнить, что сделали вы и как сделали они?)

[Switch74]

Можно так попробовать
https://jsfiddle.net/kz7fwrgp/

[Schamil74]

Вернемся к нашим баранам.

Вот ссылка на проект https://github.com/Schamil74/ForPublic

Сам слайдер выполнен на CSS. Смена фона выполнена на JS.

Проблема такая, что фон меняется, а картинки(слайды) и кнопки визуально - нет.

Отключаешь JS - слайды меняются и кнопки работают.

В чем проблема?

Как это криво работает можно посмотреть здесь http://demochel.azurewebsites.net/

 

[Switch74]

по ссылке оно ни как не работает.
не стоит разделять функционал, если вам проще сделать на js, то и смену слайдов лучше сделать на js

[Schamil74]

Ок. У меня есть и вариант со слайдером на JS)))), но я не знаю как к кнопкам привязать смену фона обертки страницы.

Здесь лежит учебный проект со слайдером на JS с исходным кодом https://github.com/Schamil74/Gllacy_JS_Slider_SC

и нужно, чтоб при нажатии кнопок менялся фон у элемента сlass="bgc-body" желательно с переходом для фона и слайда transition: all ease 2s;

А здесь как это выглядит https://schamil74.github.io/Gllacy_JS_Slider/

 

Цвет фона для: 

первого слайда   background-color: #849D8F

второго слайде   background-color: #8996a6

третьего слайда  background-color: #9d8b84

Edited February 17, 2017 by Schamil74

[mrnobody]

Там же есть скринкаст Вёрстка слайдера в «Глейси» с разъяснением как делать такой слайдер.

Вот мой вариант https://corvus-007.github.io/17030-gllacy/

[Schamil74]

3 минуты назад, mrnobody сказал:

Там же есть скринкаст Вёрстка слайдера в «Глейси» с разъяснением как делать такой слайдер.

Вот мой вариант https://corvus-007.github.io/17030-gllacy/

У меня нет скринкаста, видео и т.д. Я не проходил обучение на html

Я просто скачал PSD и делаю сам.

Edited February 17, 2017 by Schamil74