JSFiddle - React, Tailwind, and code Playground
CSS only slider
by rdillman
HTML
<div class="slideshow-wrap">
<input type="radio" id="nav-1" name="nav" checked="checked" />
<label for="nav-1"></label>
<input type="radio" id="nav-2" name="nav" />
<label for="nav-2"></label>
<input type="radio" id="nav-3" name="nav" />
<label for="nav-3"></label>
<input type="radio" id="nav-4" name="nav" />
<label for="nav-4"></label>
<input type="radio" id="nav-5" name="nav" />
<label for="nav-5"></label>
<label for="nav-1" class="arrows" id="arrow-1"></label>
<label for="nav-2" class="arrows" id="arrow-2"></label>
<label for="nav-3" class="arrows" id="arrow-3"></label>
<label for="nav-4" class="arrows" id="arrow-4"></label>
<label for="nav-5" class="arrows" id="arrow-5"></label>
<div class="slideshow-inner">
<ul>
<li>
<img src="//lorempixel.com/600/300/animals/1" />
<div class="card">
<h2>Description 1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
</div>
</li>
<li>
<img src="//lorempixel.com/600/300/animals/2" />
<div class="card">
<h2>Description 2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
</div>
</li>
<li>
<img src="//lorempixel.com/600/300/animals/3" />
<div class="card">
<h2>Description 3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
</div>
</li>
<li>
<img src="//lorempixel.com/600/300/animals/4" />
<div class="card">
<h2>Description 4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed...CSS
body {
background-color:#222;
background-repeat: repeat;
height: 500px;
padding: 1px;
}
h1 {
color: #fff;
}
.slideshow-wrap {
display: block;
height: 320px;
min-width: 260px;
max-width: 640px;
margin: auto;
border: 12px rgba(255, 255, 240, 1) solid;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 5px rgba(0, 0, 0, .8);
margin-top: 20px;
position: relative;
}
.slideshow-inner {
width: 100%;
height: 100%;
background-color: #000;
overflow: hidden;
position: relative;
}
.slideshow-inner >ul {
list-style: none;
height: 100%;
width: 500%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
.slideshow-inner >ul>li {
width: 20%;
height: 320px;
float: left;
position: relative;
}
.slideshow-inner >ul>li>img {
margin: auto;
height: 100%;
}
.slideshow-wrap input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
.slideshow-wrap input+label {
position: absolute;
left: 50%;
bottom: -45px;
z-index: 100;
width: 12px;
height: 12px;
background-color: rgba(200, 200, 200, 1);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition:...