<fieldset class="slideshow">
<!-- Slide 1 -->
<label class="slide-button" for="slideCheckbox1">Intro</label>
<input type="radio" id="slideCheckbox1" name="slide" checked></input>
<div class="slide">
<div class="slide__content">
<span class="psst">
<strong>Psst!</strong> Updated version of this pen available
<a href="https://codepen.io/pbutcher/pen/yLLKbNo" target="_blank">here</a>!
</span>
<h1>Slideshow Concept (No JS)</h1>
<p>A pure CSS and HTML slideshow concept.</p>
<p>To add or remove slides:</p>
<ul>
<li>Add a new slide template in the HTML</li>
<li>Update the <code>$slide-count</code> SCSS variable</li>
<li>Tab colours: Update the <code>$c-slides</code> SCSS variable</li>
<li>Slide popout images: Update the <code>$b-slides</code> SCSS variable</li>
</ul>
<p>Use the tabs below to change slide.</p>
<p>Et voila.</p>
</div>
</div>
<!-- Slide 2 -->
<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>
<!-- Slide 3 -->
<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>
<!-- Slide 4 -->
<label class="slide-button" for="slideCheckbox4">Zzz</label>
<input type="radio" id="slideCheckbox4" name="slide"></input>
<div class="slide">
<div class="slide__content">
<h1>Zzz</h1>
<p>Yada yada</p>
</div>
</div>
<!-- Slide 5 -->
<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>
<!-- Add more slides here! -->
</fieldset>
// Number of slides
$slide-count: 5;
// Tab colours (must be same as number of slides)
$c-slides: #2E112D #540032 #820333 #C9283E #F0433A;
// Slide backgrounds (must be same as number of slides)
$b-slides: url('https://via.placeholder.com/1000x2000/2E112D/fff?text=1') url('https://via.placeholder.com/1000x2000/540032/fff?text=2') url('https://via.placeholder.com/1000x2000/820333/fff?text=3') url('https://via.placeholder.com/1000x2000/C9283E/fff?text=4') url('https://via.placeholder.com/1000x2000/F0433A/fff?text=5');
// Total duration of slide animation
$animation-duration: 1s;
// Dimensions of the slides
$slide-width: 50%;
$slide-height: 100%;
// Slide content overflow (auto or hidden)
$slide-overflow: auto;
// Slide content colours
$c-black: #000;
$c-grey: #AAA;
$c-light-grey: #DDD;
// Other colours
$c-background: #101010;
$c-text: $c-light-grey;
$c-label-text: $c-grey;
/****************************************/
html, body {
margin: 0;
background-color: $c-background;
font-family: sans-serif;
}
.slideshow {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
margin: 0 auto;
background-color: $c-black;
overflow: hidden;
}
input {
display: none;
&:checked + .slide {
transform: translateX(0px);
transition: transform #{$animation-duration / 2} ease-in-out;
.slide__content {
width: 100%;
display: block;
}
}
}
@mixin slide-popout {
position: absolute;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
}
.slide {
transform: translateX(#{-$slide-width * 2});
position: absolute;
width: $slide-width;
height: $slide-height;
background-size: $slide-width $slide-height;
transition: transform #{$animation-duration / 2} ease-in-out;
&__content {
box-sizing: border-box;
height: calc(100% - 60px);
overflow: $slide-overflow;
padding: 50px;
color: $c-text;
position: absolute;
left: 100%;
display: none;
animation-name: fade-in;
animation-duration: $animation-duration;
animation-iteration-count: 1;
opacity: 1;
}
$i: 1;
@each $slide in $b-slides {
&:nth-child(#{$i * 3}) {
background: $slide;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
&:after {
@include slide-popout;
}
}
$i: $i + 1;
}
}
label {
box-sizing: border-box;
color: $c-label-text;
font-weight: bold;
display: block;
width: calc((50% / #{$slide-count}) - 2%);
margin: 5px 1%;
height: 50px;
line-height: 50px;
border-bottom: solid 4px $c-grey;
text-align: center;
position: absolute;
bottom: 5px;
text-transform: uppercase;
&:hover {
cursor: pointer;
color: #FFF;
border-bottom: solid 4px #FFF;
}
$i: 0;
@each $slide in $c-slides {
&:nth-child(#{($i * 3) + 1}) {
left: calc(50% + (#{$i} * (50% / #{$slide-count})));
border-bottom-color: $slide;
}
$i: $i + 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
50% {
transform: translateY(-50px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.psst {
display: inline-block;
background-color: rgba(0,150,255,0.1);
border: solid 1px rgba(0,150,255,0.5);
color: rgba(0,150,255,0.5);
padding: 15px 20px;
border-radius: 4px;
a {
color: rgba(0,150,255,1);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.