CSS Only Slideshow

Just an example of how to implement a CSS only slideshow. Makes use of a few modern (but optional) browser abilities. - translate (animation) - calc (position of arrows) - pointer-events: none (improved interaction) Also, it should be noted the slides count backwards.

HTML

<!-- the reason for the javascript:void(0) is just to block unwanted clicks //-->
<!-- the reason for the tabindex is to support webkit //-->
<div class="css-slider">
  <a href="javascript:void(0);" tabindex="-1"><span class="slide a"></span></a>
  <a href="javascript:void(0);" tabindex="-1"><span class="slide b"></span></a>
  <a href="javascript:void(0);" tabindex="-1"><span class="slide c"></span></a>
  <a href="javascript:void(0);" tabindex="-1"><span class="slide d"></span></a>
  <a href="javascript:void(0);" tabindex="-1"><span class="slide e"></span></a>
  <a href="javascript:void(0);" tabindex="-1"><span class="slide f"></span></a>
  <a href="javascript:void(0);" tabindex="-1"><span class="slide g"></span></a>
  <a href="javascript:void(0);" tabindex="-1"><span class="slide h"></span></a>
</div>

CSS

/**
 * CSS Slideshow v0.1
 * http://www.codelamp.co.uk/
 *
 * Bear in mind, this slideshow works backwards :)
 */

/* my slider was designed for a black background */
body { background: #000; }

/* this is just example .slide styling, .slide could be anything really 
   the border however is used to get around rendering glitches in firefox.
   */
.slide { display: block; width: 350px; height: 350px; border: 1px solid black; }
.slide.a { background: red; }
.slide.b { background: orange; }
.slide.c { background: yellow; }
.slide.d { background: green; }
.slide.e { background: turquoise; }
.slide.f { background: blue; }
.slide.g { background: darkblue; }
.slide.h { background: purple; }

/* .css-slider requires a fixed height */
.css-slider {
  display: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 350px;
  z-index: 1;
}

/* trick to only show to browsers that support CSS3 selectors */
.css-slider:nth-child(1) {
  display: block;
}

/* this code makes use of svg background images, they could be replaced with images */
.css-slider a {
  position: absolute;
  display: block;
  padding: 0 40px 0 40px;
  height: 350px;
  /* by default we expect new slides to the right, with faded out images */
  left: 95%;
  left: calc(100% - 40px); /* Yay! Calc :D */
  background: transparent url('data:image/svg+xml;utf8,<svg width="14px" height="20px" viewBox="0 0 14 20" xmlns="http://www.w3.org/2000/svg"><path d="m 0,0 l 14,10 l -14,10 z" fill="rgba(220,220,255,0.2)"/></svg>') no-repeat left center / 25px auto;
}

.css-slider a:hover {
  background-image: url('data:image/svg+xml;utf8,<svg width="14px" height="20px" viewBox="0 0 14 20" xmlns="http://www.w3.org/2000/svg"><path d="m 0,0 l 14,10 l -14,10 z" fill="orange"/></svg>');
}

/* this code relies on css transitions, but would be instantaneous for older agents */
.css-slider a,
.css-slider a .slide {
  -moz-transition-property: width, left, opacity, padding-left;
  -moz-transition-duration: 0.5s;
 ...

JavaScript

/* No JavaScript Required! */