If you are seeking for a slider which supports text, the following code will hopefully work for you. This is a slider in which each slide has special place for texts as long as a paragraph. By clicking on each button at the bottom, you will be directed to its slide. This slider is very simple and useful, isn’t it?
HTML
<!-- This script got from www.devanswer.com -->
<fieldset class="slideshow">
<label class="slide-button" for="slideCheckbox1">Intro</label>
<input type="radio" id="slideCheckbox1" name="slide" checked></input>
<div class="slide">
<div class="slide__content">
<h1>Slideshow Concept (No JS)</h1>
<p>A pure CSS and HTML slideshow concept.</p>
</div>
</div>
<label class="slide-button" for="slideCheckbox2">More</label>
<input type="radio" id="slideCheckbox2" name="slide"></input>
<div class="slide">
<div class="slide__content">
<h1>More</h1>
<p>More here</p>
</div>
</div>
<label class="slide-button" for="slideCheckbox3">Yet More</label>
<input type="radio" id="slideCheckbox3" name="slide"></input>
<div class="slide">
<div class="slide__content">
<h1>Yet More</h1>
<p>Yet more here</p>
</div>
</div>
<label class="slide-button" for="slideCheckbox4">And More</label>
<input type="radio" id="slideCheckbox4" name="slide"></input>
<div class="slide">
<div class="slide__content">
<h1>More</h1>
<p>And more...</p>
</div>
</div>
<label class="slide-button" for="slideCheckbox5">The End</label>
<input type="radio" id="slideCheckbox5" name="slide"></input>
<div class="slide">
<div class="slide__content">
<h1>The end</h1>
<p>It's over!</p>
</div>
</div>
</fieldset><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
html, body {
margin: 0;
background-color: #101010;
font-family: sans-serif;
}
.slideshow {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
margin: 0 auto;
background-color: #000;
overflow: hidden;
}
input {
display: none;
}
input:checked + .slide {
transform: translateX(0px);
transition: transform 0.5s ease-in-out;
}
input:checked + .slide .slide__content {
width: 100%;
display: block;
}
.slide {
transform: translateX(-100%);
position: absolute;
width: 50%;
height: 100%;
background-size: 50% 100%;
transition: transform 0.5s ease-in-out;
}
.slide__content {
box-sizing: border-box;
height: calc(100% - 60px);
overflow: auto;
padding: 50px;
color: #DDD;
position: absolute;
left: 100%;
display: none;
animation-name: fade-in;
animation-duration: 1s;
animation-iteration-count: 1;
opacity: 1;
}
.slide:nth-child(3) {
background: url("http://devanswer.com/codes/files/city1.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.slide:nth-child(3):after {
position: absolute;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
}
.slide:nth-child(6) {
background: url("http://devanswer.com/codes/files/city2.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.slide:nth-child(6):after {
position: absolute;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
}
.slide:nth-child(9) {
background: url("http://devanswer.com/codes/files/city3.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.slide:nth-child(9):after {
position: absolute;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
}
.slide:nth-child(12) {
background: url("http://devanswer.com/codes/files/city4.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.slide:nth-child(12):after {
position: absolute;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
}
.slide:nth-child(15) {
background: url("http://devanswer.com/codes/files/city5.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.slide:nth-child(15):after {
position: absolute;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
}
label {
box-sizing: border-box;
color: #AAA;
font-weight: bold;
display: block;
width: calc((50% / 5) - 2%);
margin: 5px 1%;
height: 50px;
line-height: 50px;
border-bottom: solid 4px #AAA;
text-align: center;
position: absolute;
bottom: 5px;
text-transform: uppercase;
}
label:hover {
cursor: pointer;
color: #FFF;
border-bottom: solid 4px #FFF;
}
label:nth-child(1) {
left: calc(50% + (0 * (50% / 5)));
border-bottom-color: #2E112D;
}
label:nth-child(4) {
left: calc(50% + (1 * (50% / 5)));
border-bottom-color: #540032;
}
label:nth-child(7) {
left: calc(50% + (2 * (50% / 5)));
border-bottom-color: #820333;
}
label:nth-child(10) {
left: calc(50% + (3 * (50% / 5)));
border-bottom-color: #C9283E;
}
label:nth-child(13) {
left: calc(50% + (4 * (50% / 5)));
border-bottom-color: #F0433A;
}
@keyframes fade-in {
0% {
opacity: 0;
}
50% {
transform: translateY(-50px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
