<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.