JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div id="slider-outer">

	<input type="radio" id="btn-goto-last" class="slide-check" name="slider" />
	<input type="radio" id="btn-1" class="slide-check" name="slider" checked="checked" />
	<input type="radio" id="btn-2" class="slide-check" name="slider" />
	<input type="radio" id="btn-3" class="slide-check" name="slider" />
	<input type="radio" id="btn-4" class="slide-check" name="slider" />
	<input type="radio" id="btn-5" class="slide-check" name="slider" />
	<input type="radio" id="btn-goto-first" class="slide-check" name="slider" />

	<label for="btn-goto-last" id="arrow-goto-last" class="arrows enlarge" onclick=""><img src="https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_403-512.png" width="75" height="75" alt="next" style="padding-right: 10px"></label>
	<label for="btn-1" id="arrow-1" class="arrows enlarge" onclick=""><img src="https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_403-512.png" width="75" height="75" alt="next" style="padding-right: 10px"></label>
	<label for="btn-2" id="arrow-2" class="arrows enlarge" onclick=""><img src="https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_403-512.png" width="75" height="75" alt="next" style="padding-right: 10px"></label>
	<label for="btn-3" id="arrow-3" class="arrows enlarge" onclick=""><img src="https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_403-512.png" width="75" height="75" alt="next" style="padding-right: 10px"></label>
	<label for="btn-4" id="arrow-4" class="arrows enlarge" onclick=""><img src="https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_403-512.png" width="75" height="75" alt="next" style="padding-right: 10px"></label>
	<label for="btn-5" id="arrow-5" class="arrows enlarge" onclick=""><img src="https://cdn0.iconfinder.com/data/icons/website-kit-2/512/icon_403-512.png" width="75" height="75" alt="next" style="padding-right: 10px"></label>
	<label for="btn-goto-first" id="arrow-goto-first" class="arrows enlarge" onclick=""><img...

CSS

#slider-outer { max-width:1000px; margin:auto; position:relative; line-height:1.75em; padding:100px; } /* change padding to move arrows */
#slider { display:block; overflow:hidden; border:1px solid #ccc }
#slider-outer .slide-check { position:absolute; left:-9999px; }

#slider .slides { width:500% } /* #### (slides x 100) #### */
#slider .slides > div { width:20%; /* #### (100 / slides) #### */
	float:left; overflow:hidden; position:relative;
	-webkit-transform:translate3d(0,0,0); /* http://davidwalsh.name/translate3d */
	-webkit-transition:-webkit-transform .5s ease-in-out; transition:transform .5s ease-in-out
	}


#slider-outer .arrows {
    width: 75px;
    height: 75px;	
    position:absolute; 
    display:none; 
    z-index:9999; 
    bottom:40%;
    cursor: pointer;
    }


/* #### - define ids of checked buttons/arrows here - #### */
#btn-goto-first:checked ~ #arrow-1, 
#btn-1:checked ~ #arrow-2, 
#btn-2:checked ~ #arrow-3,
#btn-3:checked ~ #arrow-4, 
#btn-4:checked ~ #arrow-5, 
#btn-5:checked ~ #arrow-1 { /* last button always goes to #arrow-1 */
	right:1px; display:block
	}

/* #### - define ids of checked buttons/arrows here - reposition/rotate '>' arrows to fake '<' arrows - #### */
#btn-2:checked ~ #arrow-1, 
#btn-3:checked ~ #arrow-2,
#btn-4:checked ~ #arrow-3, 
#btn-5:checked ~ #arrow-4, 
#btn-1:checked ~ #arrow-5 { /* #btn-1 always goes to last arrow */
	left:1px; display:block; 
	-webkit-transform:rotate(-180deg); -ms-transform:rotate(-180deg); transform:rotate(-180deg);
	}

/* #### - define ids of checked buttons/arrows here - (% increment per slide) - move slides when checked - #### */
#slider-outer #btn-1:checked ~ #slider .slides > div, #slider #btn-goto-first:checked ~ #slider .slides > div { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0) }
#slider-outer #btn-2:checked ~ #slider .slides > div { -webkit-transform:translate(-100%,0); -ms-transform:translate(-100%,0); transform:translate(-100%,0)...