css slider

#slider-wrapper {
    width: 100%;
    padding-top: 31.25%;
    margin: 1.25em auto 0;
    border-radius: 1em;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
 }

#s1, #s2, #s3, #s4 {
    padding: 0.4em;
    background: #000;
    position: absolute;
    left: 50%;
    bottom: 7.5%;
    margin-left: -2.25em;
    border-radius: 1.25em;
    opacity: 0.3;
    cursor: pointer;
    z-index: 2;
}

#s2 {
  margin-left: -0.75em;
}

#s3 {
  margin-left: 0.75em;
}

#s4 {
  margin-left: 2.25em;
}

#s1:hover, #s2:hover,
#s3:hover, #s4:hover {
    opacity: 0.5;
 }

.inner-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.control {
    display: none;
}

#Slide1:checked ~ .overflow-wrapper {
    margin-left: 0;
}

#Slide2:checked ~ .overflow-wrapper {
    margin-left: -100%;
 }

#Slide3:checked ~ .overflow-wrapper {
    margin-left: -200%;
 }

#Slide4:checked ~ .overflow-wrapper {
    margin-left: -300%;
 }

#Slide1:checked + #s1, #Slide2:checked + #s2,
#Slide3:checked + #s3, #Slide4:checked + #s4 {
    opacity: 1;
 }

.overflow-wrapper {
    width: 400%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: hidden;
    z-index: 1;
    transition: all 0.3s ease-in-out;
 }

.overflow-wrapper img {
    width: 25%;
    float: left;
 }