Non JS slideshow

by someprimetime

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Tabbed jQuery slideshow</title>
        <link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    </head>
    <body>
        <div id="slideshow">
            <div class="slides">
                <ul>
                    <li id="slide-one">
                        <h2>Slide one</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Donec pretium arcu non velit. Phasellus adipiscing auctor
                            lorem. Curabitur in urna ut purus consequat sollicitudin.
                            Phasellus ut diam. Cras magna libero, tempor id, venenatis
                            sit amet, venenatis et, dui.
                        </p>
                    </li>
                    <li id="slide-two">
                        <h2>Slide two</h2>
                        <p>
                            Nam ac nibh sit amet augue ultricies sagittis. Donec sit
                            amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
                            nisi condimentum urna, sit amet molestie odio dolor non lectus.
                            Cum sociis natoque penatibus et magnis dis parturient montes,
                            nascetur ridiculus mus.
                        </p>
                    </li>
                    <li id="slide-three">
                        <h2>Slide three</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Suspendisse...

CSS

/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
  width: 960px;
  background-color: #eee;
  border: 1px solid #ddd;}

#slideshow ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  height: 1%; /* IE fix */}

#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;}

/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
  overflow: hidden;
  width: 960px;}

#slideshow .slides ul {
  /* total width of all slides -
  960px multiplied by 3 in this case */
  width: 2880px;}

#slideshow .slides li {
  width: 920px;
  float: left;
  padding: 20px;}

#slideshow .slides h2 {
  margin-top: 0;
}

/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
  #slideshow .slides-nav {
  background-color: #ddd;
  border-top: 2px solid #ccc;}

#slideshow .slides-nav li {
  float: left;}

#slideshow .slides-nav li a {
  display: block;
  padding: 15px 20px;
  outline: none;}