I mixed two types of checks in a slide transition code, the gray side bars of the box, move the images and move all the lower blocks by checking the last 'block 5' checking the images and the blocks are made of 'radios', the two white squares made with 'target' on the side of the box only move the numbering blocks 1,2,3,4,5 completely, but there is a problem, when checking the images using the gray bar, when it arrives in 'block 5' the two white squares of the sides are no longer moving the numerical blocks and they remain stopped in the last movement made by the gray bars, since this happens only when arriving in the 5th block in the others they work perfectly, I can not find the error when arriving in block 5 that have no reference to the target used in the white squares, execute the code and you will see that on reaching the 5th block, the white squares on the sides of the box become obsolete! without moving any of the numerical blocks ...
body{ background-color:#99CCCC;
}
.ct{ position:relative; width:400px; height:450px; margin:auto; overflow:hidden; border:2px solid #FFF;
}
.img_s{ position:absolute; z-index:-1; width:100%; height:100%;
}
/*posições das imagens em estado normal ao carregar a página*/
.im1, .im2, .im3{ position:relative; transition:all 0.5s linear; width:300px; height:300px;
}
.im1{ background-color:#F00; left:50px; opacity:;
}
.im2{ background-color:#00F; left:350px; opacity:;
}
.im3{ background-color:#0C6; left:650px;
}
/**/
/*Cfg das barras do slide*/
.pre, .nxt{ position:absolute; z-index:99; width:12%; height:70%; top:0px; cursor:pointer; background-color:rgba(88,88,88,.4);
}
.pre{ left:0px;
}
.nxt{ right:0px;
}
/*botões e posições*/
input{ display:none;
}
.cr{ position:absolute; transition:all 0.3s linear; left:0px; z-index:99; width:100%; top:370px; height:11px; bottom:12px; white-space:nowrap; text-align:center;
}
.dts{ position:relative; display:inline-block; background-color:rgba(0,0,0,.4); padding:30px;
}
#t1:checked ~ .m1 .cr #dt1,
#t2:checked ~ .m1 .cr #dt2,
#t3:checked ~ .m1 .cr #dt3,
#t4:checked ~ .m1 .cr #dt4,
#t5:checked ~ .m1 .cr #dt5{
background-color:#FFF;}
/*movimentação dos botões ao clicar na barra do slide img*/
#t5:checked ~ .m1 .cr{ left:-50px;
}
/**/
/*setas achors botões*/
.m1 .pre_nxt{ position:absolute; z-index:99; top:50%; width:100%; height:0px; left:0px;
}
.m1 .pre_nxt a{ background-color:#FFF; position:absolute; width:60px; height:60px; top:-30px; opacity:0.7; transition:all 0.3s linear;
}
.m1 .pre_nxt a+a{ left:auto; right:0px;
}
.m1 .pre_nxt a:hover{opacity:1;
}
.m1 .pre_nxt > div+div{ visibility:hidden;
}
.m1 >s:target ~ .pre_nxt >*{ visibility:hidden;}
#b1:target ~ .pre_nxt >*:nth-child(1){ visibility:visible;}
#b2:target ~ .pre_nxt >*:nth-child(2){ visibility:visible;}
#b3:target ~ .pre_nxt >*:nth-child(3){ visibility:visible;}
#b4:target ~ .pre_nxt >*:nth-child(4){ visibility:visible;}
#b5:target ~ .pre_nxt >*:nth-child(5){ visibility:visible;}
/*movimentação dos botões ao clicar na seta anchor*/
#b1:target ~ .cr{ left:0px;}
#b2:target ~ .cr{ left:-30px;}
#b3:target ~ .cr{ left:-70px;}
#b4:target ~ .cr{ left:-100px;}
#b5:target ~ .cr{ left:-130px;}
/*barra lateral e posição das imagens*/
#t1:checked ~ #one,
#t2:checked ~ #two,
#t3:checked ~ #three,
#t4:checked ~ #four,
#t5:checked ~ #five{
z-index:9;}
/*Movimentação das imagens ao clicar na barra do slide*/
#t2:checked ~ #one > .im1{left:-250px;}
#t2:checked ~ #two > .im2{ left:50px;}
#t2:checked ~ #three > .im3{left:350px;}
#t3:checked ~ #one > .im1{ left:-550px;}
#t3:checked ~ #two > .im2{ left:-250px;}
#t3:checked ~ #three > .im3{ left:50px;}<div class="ct">
<input type="radio" name="tabs" class="rd" id="t1" checked/>
<input type="radio" name="tabs" class="rd" id="t2"/>
<input type="radio" name="tabs" class="rd" id="t3"/>
<input type="radio" name="tabs" class="rd" id="t4"/>
<input type="radio" name="tabs" class="rd" id="t5"/>
<div class="img_s" id="one">
<div class="im1"></div>
<label for="t5" class="pre"></label>
<label for="t2" class="nxt"></label>
</div>
<div class="img_s" id="two">
<div class="im2"></div>
<label for="t1" class="pre"></label>
<label for="t3" class="nxt"></label>
</div>
<div class="img_s" id="three">
<div class="im3"></div>
<label for="t2" class="pre"></label>
<label for="t4" class="nxt"></label>
</div>
<div class="img_s" id="four">
<div class="im4"></div>
<label for="t3" class="pre"></label>
<label for="t5" class="nxt"></label>
</div>
<div class="img_s" id="five">
<div class="im5"></div>
<label for="t4" class="pre"></label>
<label for="t1" class="nxt"></label>
</div>
<!--setas botões-->
<div class="m1">
<s id="b1"></s>
<s id="b2"></s>
<s id="b3"></s>
<s id="b4"></s>
<s id="b5"></s>
<div class="cr">
<label class="dts" id="dt1" for="t1">1</label>
<label class="dts" id="dt2" for="t2">2</label>
<label class="dts" id="dt3" for="t3">3</label>
<label class="dts" id="dt4" for="t4">4</label>
<label class="dts" id="dt5" for="t5">5</label>
</div>
<div class="pre_nxt">
<div><a href="#b5"></a><a href="#b2"></a></div>
<div><a href="#b1"></a><a href="#b3"></a></div>
<div><a href="#b2"></a><a href="#b4"></a></div>
<div><a href="#b3"></a><a href="#b5"></a></div>
<div><a href="#b4"></a><a href="#b1"></a></div>
</div>
</div>
</div><!--div principal "ct"-->