<!DOCTYPE html>
height: 12px;
border: solid 2px white;
border-radius: 999px;
background-color: transparent;
margin: 95vh 6px 0 6px;
z-index: 2;
cursor: pointer;
transition-duration: .4s;
}
.slide {
position: absolute;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
transform: translateX(-100%);
transition-duration: .4s;
opacity: 1;
}
input:checked + label {
background-color: #ffffff;
}
input:focus + label {
box-shadow: 0 0 0 2px #cccccc, 0 0 18px #fffffff;
}
input:checked ~ .slide {
transform: translateX(100%);
}
input:checked + label + .slide {
transform: translateX(0);
opacity: 1;
}
</style>
</head>
<body>
<input type="radio" id="trigger1" name="slider" checked autofocus>
<label for="trigger1"></label>
<div class="slide n1"></div>
<input type="radio" id="trigger2" name="slider">
<label for="trigger2"></label>
<div class="slide n2"></div>
<input type="radio" id="trigger3" name="slider">
<label for="trigger3"></label>
<div class="slide n3"></div>
<input type="radio" id="trigger4" name="slider">
<label for="trigger4"></label>
<div class="slide n4"></div>
<input type="radio" id="trigger5" name="slider">
<label for="trigger5"></label>
<div class="slide n5"></div>
</body>
</html>