Slider without Javascript

Simple CSS slider using :target

by Adam Killander

HTML

<main class="main">
  <article class="article">
    <header class="header">
      <h1>Slider without JS</h1>
    </header>
    <section class="slider">
      <div class="image" id="image-1"></div>
      <div class="image" id="image-2"></div>
      <div class="image" id="image-3"></div>
      <div class="image" id="image-4"></div>
      <div class="image" id="image-5"></div>
    </section>
    <footer>
      <a href="#image-1">Image 1</a>
      <a href="#image-2">Image 2</a>
      <a href="#image-3">Image 3</a>
      <a href="#image-4">Image 4</a>
      <a href="#image-5">Image 5</a>
    </footer>
  </article>
</main>

SCSS

* {
  box-sizing: border-box;
  margin: 0
}

.main {
  background: #f1f1f1;
  min-height: 100vh;
  min-width: 100vw
}

.article {
  padding: 1em;
  max-width: 600px;
  margin: 0 auto
}

.slider {
  display: block;
  padding: 1em;
  background: #fff;
  box-shadow: 0 2px 3px rgba(51, 51, 51, 0.25);
  position: relative;
  min-height: 250px
}

.image {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: ease-in-out
}

$blue  : #1982C4;
$red   : #FF595E;
$green : #8AC926;
$yellow: #FFCA3A;
$purple: #6A4C93;

$colors: $blue, $red, $green, $yellow, $purple;

@for $i from 1 through length($colors) {
  $color: nth($colors, $i);
  #image-#{$i} {
    background-color: $color;
  }
}
[id*="image-"]:target {
  z-index: 1;
}