Pure CSS carousel v2

Featuring toggleable options, including showing indicators, prev/next buttons, wrap buttons and animation styles.

by Wojciech Maj

HTML

<h1>Pure CSS slideshow</h1>

<div
    class="CSS_slideshow"
    data-show-indicators="true"
    data-indicators-position="in"
    data-show-buttons="true"
    data-show-wrap-buttons="true"
    data-animation-style="slide"
    style="-moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;"
>
    <div class="CSS_slideshow_wrapper">
        <input type="radio" name="css3slideshow" id="slide1" checked /><!--
     --><label for="slide1"><img src="https://placekitten.com/g/602/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/600/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>

<div id="about">
    <h2>Options</h2>
    <p>You can easily tweak CSS slideshow's options by modifying these following attributes in the main <code>&lt;div&gt;</code>:</p>
    <ul>
        <li><strong>data-show-indicators="true"</strong> - show the dots indicating your current position in the carousel. <em>(Experimental feature. Fully supported by Google Chrome, more or less good looking fallbacks are provided for Firefox and Internet Explorer)</em></li>
        <li><strong>data-indicators-position="in/under"</strong> - place the dots in or under the wrapper respectively. <em>(Experimental feature. Fully supported by Google Chrome, fallback indicators under the carousel are provided for Firefox and Internet Explorer)</em></li>
        <li><strong>data-show-buttons="true"</strong> - show previous/next...

CSS

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

.CSS_slideshow {
    display: block;
    width: 600px;
    height: 425px;
    overflow: hidden;
    margin: 0 auto;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    text-space-collapse: trim-inner;
}
.CSS_slideshow[data-show-indicators="true"][data-indicators-position="in"] {
    -webkit-margin-after: -25px; /* Webkit only as only Webkit-based browsers will support the dots in the wrapper */
}
.CSS_slideshow[data-animation-style] {
	-moz-transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
    /* Inherit all animation properties from parent element */
    .CSS_slideshow[data-animation-style] *,
    .CSS_slideshow[data-show-buttons="true"][data-animation-style] label:before,
    .CSS_slideshow[data-show-buttons="true"][data-animation-style] label:after {
		-moz-transition-duration: inherit;
		-webkit-transition-duration: inherit;
		transition-duration: inherit;
		-moz-transition-timing-function: inherit;
        -webkit-transition-timing-function: inherit;
        transition-timing-function: inherit;
    }
	/* WRAPPER */
	.CSS_slideshow_wrapper {
		display: block;
		width: 600px;
		height: 400px;
		position: relative;
		/* Styling */
		text-align: center;
	}
		/* Indicators */
		.CSS_slideshow[data-show-indicators="true"] input {
            width: 10px;
            height: 10px;
            outline: none;
			position: relative;
			top: calc(100% + 7px);
            -ms-transform: scale(1); /* fallback for IE: supports radio button resizing, does not support :after. Not necessary, put for readibility. */ 
            -moz-transform: scale(0.6); /* fallback for Firefox: does not radio button resizing, does not support :after */
            -webkit-appearance: none; /* hide radio buttons...