A CodePen by Ben Schwarz.

index.html

<h1>An auto playing image gallery with controls</h1>

<div class="fading-gallery fading-gallery-size-3">
  <div id="image-1" class="control-operator"></div>
  <img src="http://placehold.it/200x300.png&text=one">

  <div id="image-2" class="control-operator"></div>
  <img src="http://placehold.it/200x300.png&text=two">

  <div id="image-3" class="control-operator"></div>
  <img src="http://placehold.it/200x300.png&text=three">
  
  <div class="controls">
    <a href="#image-1" class="control-button">•</a>
    <a href="#image-2" class="control-button">•</a>
    <a href="#image-3" class="control-button">•</a>
  </div>
</div>

<small>Support: IE9+, Chrome, Safari, Firefox</small>

script.js

/*
The brief:

Create an image gallery that auto plays with an indeterminate amount of images. For example, with a simple addition of a class, you want to have it work for 2, 4 or 7 images. 

The image gallery should be controllable, to choose a particular image. 

Try to do all of this without any scripting. 
*/

style.scss

@import "compass";
body { text-align: center; }
h1 { font-weight: 700; font-family: Helvetica; }
small {font-family: Helvetica; } 
a { text-decoration: none; }


$blue: #002d56;

$max-images: 3;
$image-display-duration: 5; //seconds
$cross-fade-duration: 3; // seconds

$display-duration: $cross-fade-duration + $image-display-duration;

@for $i from 2 through $max-images {
  $total-duration: $display-duration * $i;


  @keyframes controlFade-#{$i} {
    0% { color: white; }
    #{100% * $cross-fade-duration / $total-duration} { color: $blue; }
	  #{100% * $display-duration / $total-duration} { color: $blue; }
	  #{100% * ($display-duration + $cross-fade-duration) / $total-duration} { color: white; }
	}

	@keyframes galleryFade-#{$i} {
	  0% { opacity: 0; }
	  #{100% * $cross-fade-duration / $total-duration} { opacity: 1; }
	  #{100% * $display-duration / $total-duration} { opacity: 1; }
	  #{100% * ($display-duration + $cross-fade-duration) / $total-duration} { opacity: 0; }
	}

	// rotating image gallery
	.fading-gallery-size-#{$i} {
		img { animation: galleryFade-#{$i} #{$total-duration}s; }
		.control-button { animation: controlFade-#{$i} #{$total-duration}s; }

		@for $j from 1 through $max-images {
			@if $j <= $i {
				.control-operator:nth-of-type(#{$j}):target ~ .controls .control-button:nth-of-type(#{$j}) { color: $blue; }
        
        .control-button:nth-of-type(#{$j}),
				img:nth-of-type(#{$j}) { 
					$delay: #{($j - 1) * ($display-duration) - $cross-fade-duration}s;

					animation-delay: #{$delay};
				}
			}
		}
	}
}

// control button support
.fading-gallery {
	animation: fadeInUp 1s;
	text-align: center; margin: 0 auto;
	position: relative; max-width: 200px;

	img, .control-button { animation-iteration-count: infinite; }

	img:first-of-type { position: static; opacity: 1; }
	img { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; }

	.controls { 
		animation: fadeInUp 2s;
		position: absolute; bottom: 0; left: 50%; margin-left: -50%; z-index: 2;
		width: 100%;
	}

	.control-button {
		transition: color .1s;
		font-size: 3em; text-align: center; color: white; text-shadow: 1px 1px 1px black;

		&:hover { color: lightGrey; }
		&:active { color: $blue; }
	}

	.control-operator { display: none; }

	.control-operator:target + img[src] { opacity: 1; } // Selected image
	.control-operator:target ~ img { opacity: 0; animation: none; } // Unselected image
	.control-operator:target ~ .controls .control-button { animation: none; } // Kill button animation when there is a selected image
}