Pure CSS carousel with arrows

by Wojciech Maj

HTML

<div class="info">
    Hi! Check the <strong>updated</strong>, packed with <strong>new features</strong> and <strong>configurable</strong> version <a href="https://jsfiddle.net/wojtekmaj/8qgmL2ko/" target="_blank">here</a>!
</div>

<div id="container">
    <div class="cssslideshow">
        <input type="radio" name="css3slideshow" id="slide1" checked />
        <label for="slide1"><img src="https://placekitten.com/g/600/400" /></label>
        <input type="radio" name="css3slideshow" id="slide2" />
        <label for="slide2"><img src="https://placekitten.com/g/605/400" /></label>
        <input type="radio" name="css3slideshow" id="slide3" />
        <label for="slide3"><img src="https://placekitten.com/g/602/400" /></label>
        <input type="radio" name="css3slideshow" id="slide4" />
        <label for="slide4"><img src="https://placekitten.com/g/603/400" /></label>
        <input type="radio" name="css3slideshow" id="slide5" />  
        <label for="slide5"><img src="https://placekitten.com/g/604/400" /></label> 
    </div>
</div>

CSS

* {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Putting the whole thing in a container with overflow: hidden prevents Google Chrome from showing vertical scrollbar on the page */
#container {
    display: block;
    width: 602px;
    height: 422px;
    overflow: hidden;
    margin: 0 auto;
}

.cssslideshow {
    display: block;
    width: 602px;
    height: 402px;
    white-space: nowrap;
    position: relative;
    /* Styling */
    border: 1px solid black;
    text-align: center; /* Position of navigation dots at the bottom */
}
    .cssslideshow label {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        transition: left ease-in-out 0.3s /* animation speed */, clip ease-in-out 0.3s /* animation speed */;
    }
    .cssslideshow label img {
        width: 100%;
        height: 100%;
    }
    /* All elements are waiting on the left side of the container and are clipped so they don't stick out of the container... */
    .cssslideshow label {
        left: -100%;
        clip: rect(0, 640px, 400px, 600px);
    }
    /* Except all the ones after checked radio button, those are waiting on the right... */
    .cssslideshow input:checked ~ label {
        left: 100%;
        clip: rect(0, 0, 400px, -40px);
    }
    /* Except the one immediately after checked radio button, that is in the container */
    .cssslideshow input:checked + label {
        left: 0;
        clip: rect(0, 600px, 400px, 0);
    }
    /* Puts our indicator dots at the bottom */
    .cssslideshow input {
        position: relative;
        top: calc(100% + 5px);
    }
    /* Now for the arrows... Sweet Lord. */
    .cssslideshow label:before,
    .cssslideshow label:after {
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        top: calc((100% - 40px) / 2);
        transition: right...