How to make a slider inside tabs with pure CSS?

Question

css

I made a slider on pure CSS for one of the tabs, but when you try to copy-paste it into other tabs, everything breaks. How can I get rid of this error?

tabs__block {
position: absolute;
padding: 20px;
font-size: 18px;
line-height: 24px;
display: none;
}

.tabs__block:before {
content: "";
height: 50px;
width: 33.333%;
position: absolute;
top: -30px;
}

.tabs__block{
margin-top: 40px;
background-color: #fff;
}

.tabs__block:target {
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: 740px;
max-height: 440px;
}

/*настройка переключения и положения для левой стрелки*/
#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('../icons/Union\(1\).svg') no-repeat;
float: left;
margin: -3px 0 0 -134px;
display: block;
height: 68px;
width: 68px;
}

/*настройка переключения и положения для правой стрелки*/
#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('../icons/Union\(2\).svg') no-repeat;
float: right;
margin: 0 -180px 0 0;
display: block;
height: 68px;
width: 68px;
}

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: -25% 0 0 0;
width: 100%;
height: 50px;
}

#active label{
border-radius: 10px;
display: inline-block;
width: 15px;
height: 15px;
background: #bbb;
}

#active{
margin: 23% 0 0;
text-align: center;
}

#active label:hover{
background: #76c8ff;
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: #18a3dd;
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;
}