Помогите разобраться со слайдером на HTML/CSS!!!

u-b0at · 20.Апрель.2017 06:07:55

Всем большой HI!

Итак, я хочу разобраться как работает слайдер на чистом HTML/CSS:

Есть два варианта - один рабочий, второй - нет. В рабочем варианте: <label> не оборачивает <input>, в нерабочем, соответственно, оборачивает. Вопрос, почему если обернуть тэг <label> в тэг <input>, то слайдер не будет работать???
И ещё, я не очень понял зачем нужно для переключателя input указывать свойство z-index.
Очень прошу, верстаки, разложите-объясните мою проблему!

Вот рабочая версия:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>SLIDER</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Language" content="ru">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="author" content="">
		<script src="#" type="text/javascript"></script>
		<link href="#" type="text/css" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=cyrillic-ext" rel="stylesheet">
		<style type="text/css">
		
			html, 
			body{
				margin:0;
				padding:0:
			}
			
			body{
				font-family:"Roboto", Arial, sans-serif;
				font-size:16px;
				color:#000;
				background-color:#fff;
			}
			
			/* HEADER страницы, куда в дальнейшем можно разместить МЕНЮ сайта */
			.header{
				padding:50px 0; /* Устанавливаем внутренние отступы сверху и снизу для HEADER */
				background-color:#eee; /* Цвет фона - серый */
			}
			
			/*Контент для SLIDER*/
			.slider{
				position:relative; /* Устанавливаем относительное позиционирование, чтобы дочерние элементы размещать где нам нужно */
				width:880px; /* Устанавливаем ширину элемента SLIDER */
				height:310px;/* Устанавливаем высоту элемента SLIDER */
				margin:0 auto; /* Центрируем элемент SLIDER */
				border:1px solid maroon;
				
			}
			
			
			/*Переключатели*/
			input[type="radio"]{
				position:relative;
				display:inline-block;
				z-index:666;
			}
			
			.slide{
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				border:4px dotted lime;
				overflow:hidden;
			}
			
		
			.slide{
				display:none;
			}
			
			.slide:nth-child(1){
				background-color:red;
			}
			.slide:nth-child(2){
				background-color:green;
			}
			.slide:nth-child(3){
				background-color:blue;
			}
			
			#btn-1:checked ~ .slides .slide:nth-child(1) { 
				display: block;
			}
			#btn-2:checked ~ .slides .slide:nth-child(2) { 
				display: block;
			}
			#btn-3:checked ~ .slides .slide:nth-child(3) { 
				display: block;
			}

		
		
		</style>
	</head>
	<body>
		
		<!-- HEADER -->
		<div class="header">
			
			<!-- SLIDER -->
			<div class="slider">
					
					<!-- CONTROLS -->
					<label for="btn-1"></label>
						<input type="radio" id="btn-1" checked name="tgl">

					
					<label for="btn-2"></label>
						<input type="radio" id="btn-2" name="tgl">

					
					<label for="btn-3"></label>
						<input type="radio" id="btn-3" name="tgl">

				<!-- end CONTROLS -->
					
				
				<!-- SLIDES -->
				<div class="slides">
					
					<!-- SLIDE I -->
					<div class="slide">
						<h1>SLIDE I</h1>
					</div>
					<!-- end SLIDE I -->
					
					
					<!-- SLIDE II -->
					<div class="slide">
						<h2>SLIDE II</h2>
					</div>
					<!-- end SLIDE II -->
					
					
					<!-- SLIDE III -->
					<div class="slide">
						<h3>SLIDE III</h3>
					</div>
					<!-- end SLIDE III -->
				
				</div>				
				<!-- end SLIDES -->
			
			</div>			
			<!-- end SLIDER -->
		
		</div>		
		<!-- end HEADER -->
	
	
	</body>
</html>

А вот не рабочая:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>SLIDER</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Language" content="ru">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="author" content="">
		<script src="#" type="text/javascript"></script>
		<link href="#" type="text/css" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=cyrillic-ext" rel="stylesheet">
		<style type="text/css">
		
			html, 
			body{
				margin:0;
				padding:0:
			}
			
			body{
				font-family:"Roboto", Arial, sans-serif;
				font-size:16px;
				color:#000;
				background-color:#fff;
			}
			
			/* HEADER страницы, куда в дальнейшем можно разместить МЕНЮ сайта */
			.header{
				padding:50px 0; /* Устанавливаем внутренние отступы сверху и снизу для HEADER */
				background-color:#eee; /* Цвет фона - серый */
			}
			
			/*Контент для SLIDER*/
			.slider{
				position:relative; /* Устанавливаем относительное позиционирование, чтобы дочерние элементы размещать где нам нужно */
				width:880px; /* Устанавливаем ширину элемента SLIDER */
				height:310px;/* Устанавливаем высоту элемента SLIDER */
				margin:0 auto; /* Центрируем элемент SLIDER */
				border:1px solid maroon;
				
			}
			
			
			/*Переключатели*/
			input[type="radio"]{
				position:relative;
				display:inline-block;
				z-index:666;
			}
			
			.slide{
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				border:4px dotted lime;
				overflow:hidden;
			}
			
		
			.slide{
				display:none;
			}
			
			.slide:nth-child(1){
				background-color:red;
			}
			.slide:nth-child(2){
				background-color:green;
			}
			.slide:nth-child(3){
				background-color:blue;
			}
			
			#btn-1:checked ~ .slides .slide:nth-child(1) { 
				display: block;
			}
			#btn-2:checked ~ .slides .slide:nth-child(2) { 
				display: block;
			}
			#btn-3:checked ~ .slides .slide:nth-child(3) { 
				display: block;
			}

		
		
		</style>
	</head>
	<body>
		
		<!-- HEADER -->
		<div class="header">
			
			<!-- SLIDER -->
			<div class="slider">
					
					<!-- CONTROLS -->
					<label for="btn-1">
						<input type="radio" id="btn-1" checked name="tgl">
					</label>
					
					<label for="btn-2">
						<input type="radio" id="btn-2" name="tgl">
					</label>
					
					<label for="btn-3">
						<input type="radio" id="btn-3" name="tgl">
					</label>
				<!-- end CONTROLS -->
					
				
				<!-- SLIDES -->
				<div class="slides">
					
					<!-- SLIDE I -->
					<div class="slide">
						<h1>SLIDE I</h1>
					</div>
					<!-- end SLIDE I -->
					
					
					<!-- SLIDE II -->
					<div class="slide">
						<h2>SLIDE II</h2>
					</div>
					<!-- end SLIDE II -->
					
					
					<!-- SLIDE III -->
					<div class="slide">
						<h3>SLIDE III</h3>
					</div>
					<!-- end SLIDE III -->
				
				</div>				
				<!-- end SLIDES -->
			
			</div>			
			<!-- end SLIDER -->
		
		</div>		
		<!-- end HEADER -->
	
	
	</body>
</html>

Tala · 20.Апрель.2017 06:34:43

вспоминайте селекторы последующих элементов (https://htmlacademy.ru/courses/57/run/10)
вы input обернули в label - и всё, input здесь единственный дочерний элемент, никаких “последующих”, которые могли бы быть выбраны этим селектором нету.

в первом же случае input обернут в .slider и у него куча соседей: label и .slides - вот на них и идет “передача действия” за счет селектора последующих элементов.

u-b0at · 20.Апрель.2017 06:51:57

Точно!!!
Вот я тормоз коммунизма!!!
Это как с всплывающими подсказками через :hover!!! - размещать нужно не абы где, а в родителе.
СПАСИБО!

u-b0at · 20.Апрель.2017 06:58:19

С z-index не объясните?

Tala · 20.Апрель.2017 07:06:37

z-index нужен, если несколько элементов спозиционированы в одну область сайта и накладываются друг на друга - вот для регулирования порядка накладывания и применяется z-index
Если у вас инпут ни с кем не пересекается, то z-index не нужен.

u-b0at · 20.Апрель.2017 07:14:36

Всё по полочкам - спасибо)

u-b0at · 20.Апрель.2017 08:16:08

Tala, есть ещё вопрос в догонку:
смотри

/*Переключатели*/
		input[type="radio"]{
			position:relative;
			display:inline-block;
		}
		
		label{
			width:8px;
			height:8px;
			background:#fff;
			border:10px solid gold;
			border-radius:50%;
			position:relative;
			display:inline-block;
			top:50%;
			left:50%;
			margin:0 10px;
			z-index:10;				
		}
		
	#btn-1:checked ~ .slider-controls label[for="btn-1"],
	#btn-2:checked ~ .slider-controls label[for="btn-2"],
	#btn-3:checked ~ .slider-controls label[for="btn-3"] { 
		background:#c1c1c1;
	}	


 <!-- CONTROLS -->

 <input type="radio" id="btn-1" checked name="tgl">

 <input type="radio" id="btn-2" name="tgl">

 <input type="radio" id="btn-3" name="tgl">
					
<div class="slider-controls">
	  <label for="btn-1"></label>
	  <label for="btn-2"></label>
	  <label for="btn-3"></label>
</div>

<!-- end CONTROLS -->

если label обернуть в slider-controls, то #btn-1:checked ~ .slider-controls label - сработает.
А есть label не обернуть в slider-controls, то #btn-1:checked ~ label - не сработает.
Почему?

Tala · 20.Апрель.2017 08:26:21

так а label по отношению к input где расположен? какой будет HTML-код?

u-b0at · 20.Апрель.2017 08:32:01

Ё! Точно…
Что же я на ровно месте ошибок своих не вижу…
СПАСИБО