CSS Only Slideshow v0.2

A new and improved version of css-only slideshow.

by CJ Juarez

HTML

<!-- the reason for the tabindex is to support webkit //-->
  <div class="css-slider-mask">
    <!-- there are a number of add on modules which are demo-able by the javascript checkboxes added to this example page //-->
    <ul class="css-slider with-responsive-images with-selection-disabled with-reflection with-fade-in">
      <li class="slide" tabindex="1" id="l1">
        <span class="slide-outer">
          <span class="slide-inner">
            <!-- each slide-gfx needs a unique id if you wish to use reflections, you will also need to update .with-reflection in core.css //-->
            <span class="slide-gfx" id="s1">
              <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/a.png" />
            </span>
          </span>
        </span>
      </li>
      <li class="slide" tabindex="1" id="l2">
        <span class="slide-outer">
          <span class="slide-inner">
            <span class="slide-gfx" id="s2">
              <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/b.png" />
            </span>
          </span>
        </span>
      </li>
      <li class="slide" tabindex="1" id="l3">
        <span class="slide-outer">
          <span class="slide-inner">
            <span class="slide-gfx" id="s3">
              <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/c.png" />
            </span>
          </span>
        </span>
      </li>
      <li class="slide" tabindex="1" id="l4">
        <span class="slide-outer">
          <span class="slide-inner">
            <span class="slide-gfx" id="s4">
              <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/d.png" />
            </span>
          </span>
        </span>
      </li>
      <li class="slide" tabindex="1" id="l5">
        <span class="slide-outer">
          <span class="slide-inner">
            <span class="slide-gfx" id="s5">
              <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/e.png" />
        ...

CSS

/* my slider was designed for an image background (optional) */
html, body { height: 100%; padding: 0; margin: 0; }
body { background: #fff; }

/* project unique slide graphics settings, completely whatever you want them to be (optional) */
.slide-gfx img {
  max-width: 600px;
  max-height: auto;
  border-radius: 20px;
  box-shadow: 0 0 80px rgba(255,255,255,1);
}

/* mask the overflowing content, this will prevent scrollbars (optional) */
.css-slider-mask {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* base style for the slider, you can place or size as you like (optional) */
.css-slider {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  width: 96%;
  height: 100%;
  margin-left: 2%;
  z-index: 1;
}

/* inital trick to hide the slider from everyone */
.css-slider {
  position: relative;
  display: none;
}

/* ... then a simple hack to only show for browsers that support :nth-child */
body:nth-child(2) .css-slider {
  display: block;
}

/* style the slides */
.css-slider .slide {
  display: block;
  position: absolute;
  left: 40px;
  top: 0;
  right: 0;
  bottom: 0;
  padding-left: 0;
  padding-right: 40px;
  z-index: 100;
  outline: 0; /* kill the focus rect! */
}

/* style the forward arrow */
.css-slider .slide {
  background: url('http://www.codelamp.co.uk/css-slideshow/v0.2/slideshow/arrow-right.svg') no-repeat right center;
  background-size: 25px auto;
}

/* style the forward arrow hover state */
.css-slider .slide:hover {
  background-image: url('http://www.codelamp.co.uk/css-slideshow/v0.2/slideshow/arrow-right-hover.svg');
  cursor: pointer;
}

/* reveal the focused slide, including last child for when there is no focus */
.css-slider .slide:target,
.css-slider .slide:target:hover,
.css-slider .slide:focus,
.css-slider .slide:focus:hover,
.css-slider .slide:last-child,
.css-slider .slide:last-child:hover {
  left: 40px;
  right: 40px;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
 ...