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);
}