Basic Image Slideshow with Pure CSS

Category: CSS & CSS3 , Slideshow | April 14, 2015
Author: joggink
Views Total: 10,862
Official Page: Go to website
Last Update: April 14, 2015
License: MIT

Preview:

Basic Image Slideshow with Pure CSS

Description:

A proof of concept to have a pure HTML/CSS image slideshow without javascript. It uses the checkbox for active slide and the label element for next/prev arrows navigation. The slideshow also comes with a crossfade transition effect based on CSS3.

How to use it:

Load the core stylesheet in your html page.

<link rel="stylesheet" href="css/slideshow.css">

Add images together with bullets pagination and arrows navigation into the slideshow.

<div class="slideshow">

  <input type="radio" name="slide" id="item-1" checked="checked" />
  <div class="slideshow-item">
    <img src="1.jpg" />
    <label for="item-3" class="previous">Go to slide 3</label>
    <label for="item-2" class="next">Go to slide 2</label>
  </div>

  <input type="radio" name="slide" id="item-2" />
  <div class="slideshow-item">
    <img src="2.jpg" />
    <label for="item-1" class="previous">Go to slide 1</label>
    <label for="item-3" class="next">Go to slide 3</label>
  </div>

  <input type="radio" name="slide" id="item-3" />
  <div class="slideshow-item">
    <img src="3.jpg" />
    <label for="item-2" class="previous">Go to slide 2</label>
    <label for="item-1" class="next">Go to slide 1</label>
  </div>

</div>

You Might Be Interested In:

One thought on “Basic Image Slideshow with Pure CSS

Leave a Reply