SOURCE

<div class="container">
  <div data-am-gallery="3 next-prev-navigation">
    <!-- Radio -->
    <input type="radio" name="gallery" id="img-1" checked />
    <input type="radio" name="gallery" id="img-2" />
    <input type="radio" name="gallery" id="img-3" />
    <!-- Images -->
    <div class="images">
      <div class="image" style="background-image: url(https://images.unsplash.com/photo-1433190152045-5a94184895da?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);">
      </div>
      <div class="image" style="background-image: url(https://images.unsplash.com/photo-1440557653082-e8e186733eeb?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);">
      </div>
      <div class="image" style="background-image: url(https://images.unsplash.com/photo-1449057528837-7ca097b3520c?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);">
      </div>
    </div>
    <!-- Navigation -->
    <div class="navigation">
      <label class="dot" for="img-1">
      </label>
      <label class="dot" for="img-2">
      </label>
      <label class="dot" for="img-3">
      </label>
    </div>
    <!-- Prev next navigation -->
    <div class="prev-container">
      <label class="prev" for="img-1">
      </label>
      <label class="prev" for="img-2">
      </label>
      <label class="prev" for="img-3">
      </label>
    </div>
    <div class="next-container">
      <label class="next" for="img-1">
      </label>
      <label class="next" for="img-2">
      </label>
      <label class="next" for="img-3">
      </label>
    </div>
  </div>
</div>

/* Variables */

//Change this to the number of maximum images allowed.
//The higher number, the bigger the generated CSS will be.
$max-images: 5;
//Preferences
$fade-time: 1000ms;
$autoplay-time: 2s;
//Icons used in prev and next navigation
$prev-next-fontfamily: sans-serif;
$prev-next-icon-size: 3vw;
$prev-icon: '❮';
$next-icon: '❯';
//Colors
$dot-color: rgba(255, 255, 255, 0.8);
$dot-active-color: #29acbb;
$fade-color: #fff;

/* Mixin to handle which next/prev buttons to display */

@mixin handleNextPrev($imgs) {
  input[type="radio"] {
    &:checked {
      $i: $imgs;
      @while $i > 0 {
        &:nth-child(#{$i}) {
          ~ .prev-container {
            $prev: $i - 1;
            @if $prev==0 {
              .prev:nth-child(#{$imgs}) {
                display: block;
              }
            }
            @else {
              .prev:nth-child(#{$prev}) {
                display: block;
              }
            }
          }
          ~ .next-container {
            $next: $i + 1;
            @if $next==($imgs + 1) {
              .next:nth-child(1) {
                display: block;
              }
            }
            @else {
              .next:nth-child(#{$next}) {
                display: block;
              }
            }
          }
        }
        $i: $i - 1;
      }
    }
  }
}


/* Gallery */

[data-am-gallery] {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: $fade-color;
  .image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity $fade-time ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  input[type="radio"] {
    position: fixed;
    top: -9999px;
    &:checked {
      /* This loop handles the image switching and dot active state */
      $i: 5;
      @while $i > 0 {
        &:nth-child(#{$i}) {
          //Show image
          ~ .images {
            .image:nth-child(#{$i}) {
              opacity: 1;
            }
          }
          //Add active state to dot
          ~ .navigation {
            .dot:nth-child(#{$i}) {
              background-color: $dot-active-color;
              &:hover {
                opacity: 1;
              }
            }
          }
        }
        $i: $i - 1;
      }
    }
  }
  /* Dot Navigation */
  .navigation {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
  }
  .dot {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 2px;
    border-radius: 50%;
    background-color: $dot-color;
    cursor: pointer;
    transition: opacity 200ms ease;
    &:hover {
      opacity: 0.8;
    }
  }
  /* Next/Prev Navigation */
  %prev-next {
    position: absolute;
    display: none;
    top: 0;
    bottom: 0;
    width: 100px;
    cursor: pointer;
    transition: background-color 200ms ease;
    font-family: $prev-next-fontfamily;
    &:before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: $prev-next-icon-size;
      color: rgba(255, 255, 255, 0.5);
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
  .prev {
    @extend %prev-next;
    left: 0;
    &:before {
      content: "#{$prev-icon}";
    }
  }
  .next {
    @extend %prev-next;
    right: 0;
    &:before {
      content: "#{$next-icon}";
    }
  }
}


/* Gallery Modifiers (number of images) */


/*
Loop to generate modifiers on [data-am-gallery] for number of images (up to $max-images).
This is required to handle the prev and next buttons.

The slideshow will still function without a modifier set, but will lose it's prev and next buttons functionlity.
*/

$img-count: $max-images;
@while $img-count > 0 {
  @if $img-count==1 {
    [data-am-gallery~="#{$img-count}"] {
      .navigation {
        display: none;
      }
    }
  }
  @else {
    [data-am-gallery~="#{$img-count}"] {
      //Hide additional radio buttons, images and dots if more than set in data-am-gallery
      $i: $max-images;
      @while $i > $img-count {
        input[type="radio"],
        .navigation .dot,
        .image {
          &:nth-child(#{$i}) {
            display: none !important;
          }
        }
        $i: $i - 1;
      }
      //Handle next and prev buttons
      &[data-am-gallery~="next-prev-navigation"] {
        @include handleNextPrev($img-count);
      }
    }
  }
  $img-count: $img-count - 1;
}


/* Base Styling */

body {
  margin: 0;
}

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}