<!-- Backwards to last slide when on 1 -->
<label for="input-4"></label>

<!-- Backwards to next slide when on 2 -->
<input id="input-1" type="radio" name="slider" checked>
<label for="input-1"></label>

<!-- Slide 1 -->
<div class="slide slide-1">
  <h1>Slide 1</h1>
</div>

<!-- Forwards to slide 2 when on 1, backwards on 3 -->
<input id="input-2" type="radio" name="slider">
<label for="input-2"></label>

<!-- Slide 2-->
<div class="slide slide-2">
  <h1>Slide 2</h1>
</div>

<!-- Forwards to slide 3 when on 2, backwards on 4 -->
<input id="input-3" type="radio" name="slider">
<label for="input-3"></label>
<div class="slide slide-3">
  <h1>Slide 3</h1>
</div>

<!-- Forwards to slide 4 when on 3 -->
<input id="input-4" type="radio" name="slider">
<label for="input-4"></label>
<div class="slide slide-4">
  <h1>Slide 4</h1>
</div>

<!-- Backwards to slide 1 when on 4 -->
<label for="input-1"></label>

html, body
  background: black
  height: 100vh
  width: 100vw
  padding: 0
  margin: 0
  overflow: hidden
=slide-generator($count)
  label
    position: absolute
    top: 0
    bottom: 0
    right: 0
    height: 100%
    display: block
    z-index: 3
    cursor: pointer
    width: 100%
    &:last-of-type
      display: none
  input[type="radio"]
    position: absolute
    z-index: 200
    &:not(:checked)
      + label
  .slide
    position: absolute
    top: 0
    left: 0
    height: inherit
    width: inherit
    z-index: 1
    opacity: 0
    transition: opacity 1s
  @for $int from 1 through $count
    $next-int: $int + 1
    @if $int == $count
      $next-int: 1
    .slide-#{$int}
      background: adjust-hue(red, ($int * 20))
    #input-#{$int}
      left: $int * 20px
      &:checked
        ~ label
          display: none
        ~ label[for="input-#{$next-int}"]
          width: 50% !important
          display: block
          z-index: 4
        ~ .slide-#{$int}
          opacity: 1
      
+slide-generator(4)