Как без скриптов на чистом css задать id каждому слайду?
Чтобы при нажатии, скажем на фото5 слайд-шоу начиналось не с 1-го а с 5-того фото? Слайдер в попапе
<!doctype html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
<div class="popup-wrapper">
<input type="checkbox" class="popup-checkbox" id="popupCheckboxOne">
<div class="popup">
<div class="popup-content">
<label for="popupCheckboxOne" class="popup-closer">×</label>
<div class="all">
<input checked type="radio" name="respond" id="desktop">
<article id="slider">
<input checked type="radio" name="slider" id="switch1">
<input checked type="radio" name="slider" id="switch2">
<input checked type="radio" name="slider" id="switch3">
<input checked type="radio" name="slider" id="switch4">
<input checked type="radio" name="slider" id="switch5">
<div id="slides">
<div id="overflow">
<div class="image">
<article><img src="file:///C|/Users/Welcom/Desktop/111/slice/images/show/zoom-5.jpg"></article>
<article><img src="file:///C|/Users/Welcom/Desktop/111/slice/images/show/zoom-6.jpg"></article>
<article><img src="file:///C|/Users/Welcom/Desktop/111/slice/images/show/zoom-7.jpg"></article>
<article><img src="file:///C|/Users/Welcom/Desktop/111/slice/images/show/zoom-8.jpg"></article>
<article><img src="file:///C|/Users/Welcom/Desktop/111/slice/images/show/zoom-9.jpg"></article>
</div>
</div>
</div>
<div id="controls">
<label for="switch1"></label>
<label for="switch2"></label>
<label for="switch3"></label>
<label for="switch4"></label>
<label for="switch5"></label>
</div>
</article>
</div>
</div>
</div>
</div>
<label for="popupCheckboxOne" class="popup-shower"><img src="file:///C|/Users/Welcom/Desktop/111/slice/images/show/s-p-2.jpg" alt="" style="width: 200px; height: 149px;"></label>
</body>
<style>
.popup-checkbox, .popup {
display: none;
}
.popup {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.popup:before {
display: block;
content: ' ';
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
opacity: .5;
}
.popup-content {
width: 600px;
height: 450px;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 6px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.popup-shower {
cursor: pointer;
text-decoration: underline;
}
.popup-shower:hover {
color: #00a;
text-decoration: underline;
}
.popup-closer {
position: absolute;
top: 15px;
right: 5px;
color: #cc0066;
font-size: 25px;
border: 1px solid #cc0066;
display: block;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border-radius: 50%;
cursor: pointer;
z-index: 1;
}
.popup-closer:hover {
background-color: #eee;
}
.popup-checkbox:checked + .popup {
opacity: 1;
display: block;
}
#slider {
position: relative;
text-align: center;
top: 10px;
}
#slider{
margin: 0 auto;
}
#slides article{
width: 20%;
float: left;
}
#slides .image{
width: 500%;
line-height: 0;
}
#overflow{
width: 100%;
overflow: hidden;
}
article img{
width: 100%;
}
#desktop:checked ~ #slider{
max-width: 960px;
}
#switch1:checked ~ #controls label:nth-child(5),
#switch2:checked ~ #controls label:nth-child(1),
#switch3:checked ~ #controls label:nth-child(2),
#switch4:checked ~ #controls label:nth-child(3),
#switch5:checked ~ #controls label:nth-child(4){
background: url('prev.png') no-repeat;
float: left;
margin: 0 0 0 -84px;
top: 300px;
display: block;
height: 40px;
width: 40px;
}
#switch1:checked ~ #controls label:nth-child(2),
#switch2:checked ~ #controls label:nth-child(3),
#switch3:checked ~ #controls label:nth-child(4),
#switch4:checked ~ #controls label:nth-child(5),
#switch5:checked ~ #controls label:nth-child(1){
background: url('next.png') no-repeat;
float: right;
margin: 0 -84px 0 0;
display: block;
height: 40px;
width: 40px;
}
label, a{
cursor: pointer;
}
.all input{
display: none;
}
#switch1:checked ~ #slides .image{
margin-left: 0;
}
#switch2:checked ~ #slides .image{
margin-left: -100%;
}
#switch3:checked ~ #slides .image{
margin-left: -200%;
}
#switch4:checked ~ #slides .image{
margin-left: -300%;
}
#switch5:checked ~ #slides .image{
margin-left: -400%;
}
#controls{
margin: -40% 0 0 0;
width: 100%;
height: 20px;
}
#active label{
border-radius: 10px;
display: inline-block;
width: 10px;
height: 10px;
background: #FF0067;
}
#active{
margin: 23% 0 0;
text-align: center;
}
#active label:hover{
border-color: #777 !important;
}
#switch1:checked ~ #active label:nth-child(1),
#switch2:checked ~ #active label:nth-child(2),
#switch3:checked ~ #active label:nth-child(3),
#switch4:checked ~ #active label:nth-child(4),
#switch5:checked ~ #active label:nth-child(5){
background: #fff;
border-color: #18a3dd !important;
}
#slides .image{
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
#controls label:hover{
opacity: 0.6;
}
#controls label{
transition: opacity 0.2s ease-out;
}
</style>
switch1, 2 и т. п. пробовала. Хотелось бы обойтись без скриптов.
просто ссылками тоже пробовала, якоря не идут тоже
