A Pure CSS Slideshow Effect

A web slideshow built with Pure CSS3 Transitions.

How It Works

The main idea is to create a slideshow effect like in Microsoft PowerPoint but for web page using HTML and CSS only.
Read the full article for more details.

The CSS techniques used in this demo are:

  • CSS3 Transitions
  • CSS :checked Pseudo-class
  • CSS Sibling Selector (~)

Hence, this demo will only works on those browsers that does supports these CSS properties and attributes.

Oops! This is dead end...

What Else?

The slide animation was caused by change of container top and left attributes. So, instead of having horizontal scrolling, we could create vertical scrolling as well.

Choose Your Path

Now, where you want to go? =)

Sitemap

Yeah! you reach here finally... Below shown the sitemap and flow of this demo.

Slideshow flow

Of course, you can go to any slide (no flow) by using the <label for="chk-name" />

Like This?
Close Ads [x]