<div class="slider">
  <div class="slider-viewport">
    <div id="img1">
      <div id="img2">
        <div id="img3">
          <div id="img4">
            <div id="img5">
              <div class="slider-content">
                <img src="https://source.unsplash.com/800x400/?water">
                <img src="https://source.unsplash.com/800x400/?forest">
                <img src="https://source.unsplash.com/800x400/?mountain">
                <img src="https://source.unsplash.com/800x400/?nature">
                <img src="https://source.unsplash.com/800x400/?field">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="slider-nav">
    <a href="#img1"></a>
    <a href="#img2"></a>
    <a href="#img3"></a>
    <a href="#img4"></a>
    <a href="#img5"></a>
  </div>
</div>
$slider-width: 800px;
$slider-height: 400px;
body {
  background-color: #1e1f26;
}
.slider {
  width: $slider-width;
  margin: 30px auto;
  position: relative;
}
.slider-viewport {
  width: $slider-width;
  height: $slider-height;
  overflow: hidden;
}
.slider-content {
  display: grid;
  grid-auto-flow: column;
  transition: 1s all;

  img {
    width: $slider-width;
    height: $slider-height;
  }
}
.slider-nav {
  position: absolute;
  width: 100%;
  bottom: -30px;
  margin-top: 10px;
  text-align: center;
  a {
    box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
    display: inline-block;
    background-color: #adafbc;
    width: 15px;
    height: 15px;
    margin: 0 3px;
    &:hover {
      background-color: #fff;
      box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);
    }
  }
}
@for $i from 2 to 6 {
  #img#{$i}:target .slider-content {
    transform: translateX(-$slider-width * $i + $slider-width);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.