помогите понять ,как работает слайдер на css3

[ishurgaya]

Здравствуйте. нашел на английском сайте слайдер на css3 без js.

 

Вот здесь : http://csscience.com/responsiveslidercss3/

 

так вот там написано ,что ловится клик на радио кнопках с id: slide1 , slide2.

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

	#slide1:checked ~ #slides .inner { margin-left:0; }	#slide2:checked ~ #slides .inner { margin-left:100%; }	#slide3:checked ~ #slides .inner { margin-left:200%; }	#slide4:checked ~ #slides .inner { margin-left:300%; }	#slide5:checked ~ #slides .inner { margin-left:400%; }

Впервые встречаю такой прием в css3 ,где можно о таком способе динамического задания стилей почитать?

 

И еще помогите понять по какому принципу работает перелистывание слайдера с помощью стрелок по бокам ?

Edited October 13, 2015 by ishurgaya

[hypnocolor]

По поводу стрелок — грубо говоря, там тоже манипуляции с их расположением в зависимости от текущего слайда. Подробнее в подключённом там css-файле расписано.

/* Control Setup */#controls {	margin: -25% 0 0 0;	width: 100%;	height: 50px;}#controls label { 	display: none;	width: 50px;	height: 50px;	opacity: 0.3;}#active {	margin: 23% 0 0;	text-align: center;}#active label {	-webkit-border-radius: 5px;	-moz-border-radius: 5px;	border-radius: 5px;	display: inline-block;	width: 10px;	height: 10px;	background: #bbb;}#active label:hover {	background: #ccc;	border-color: #777 !important;}#controls label:hover {	opacity: 0.8;}#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(5), #slide5:checked ~ #controls label:nth-child(1) {	background: url('next.png') no-repeat;	float: right;	margin: 0 -70px 0 0;	display: block;}#slide1:checked ~ #controls label:nth-child(5),#slide2:checked ~ #controls label:nth-child(1),#slide3:checked ~ #controls label:nth-child(2),#slide4:checked ~ #controls label:nth-child(3),#slide5:checked ~ #controls label:nth-child(4) {	background: url('prev.png') no-repeat;	float: left;	margin: 0 0 0 -70px;	display: block;}#slide1:checked ~ #active label:nth-child(1),#slide2:checked ~ #active label:nth-child(2),#slide3:checked ~ #active label:nth-child(3),#slide4:checked ~ #active label:nth-child(4),#slide5:checked ~ #active label:nth-child(5) {	background: #333;	border-color: #333 !important;}

[Jack_V]

Когда-то делал подобный слайдер ради интереса. Посмотрите в код блока слайдера, там все довольно наглядно.

 

Все довольно статично в разметке, появляются и исчезают только label-стрелки + margin + фон label-кнопок, в зависимости от отмеченных input, которых всего три.

[ishurgaya]

всем спасибо. разобрался