Simplísimo slideshow sin librerías externas

A mi siempre me sorprende lo que hace leigeber. Esta vez es uno de los tantos slideshows que existen pero con dos particularidades que lo destacan, primero, porque no requiere librería alguna y segundo porque el script es pequeñisimo.

Todo lo que necesitamos es ir a su página y descargar el ZIP que tiene los archivos necesarios y un demo pero, la idea es muy simple.

Primero, colocamos el script, ya sea, directamente en la plantilla:

<script type='text/javascript'>
//<![CDATA[
  ... aquí copiamos y pegamos el contenido del archivo script.js ...
//]]>
</script>

o lo cargamos desde algún servidor externo, en ese caso, podemos elegir entre el archivo normal (script.js) o uno comprimido (packed.js) aunque es tan pequeño que no sé si vale la pena:

<script type="text/javascript" src="URL_script.js"></script>

Luego, el CSS con las variantes que dependerán de las imágenes que utilicemos:

<style type='text/css'>
#demowrapper { /* el rectángulo contenedor */
  margin: 0px auto;
  /* el ancho de la imagen + los anchos de las flechas de navegación + los bordes */
  width: 598px;
}
.sliderbutton { /* las flechas de dirección */
  float: left;
  padding-top: 148px
  width: 32px;
}
.sliderbutton img { cursor:pointer; }
.sliderbutton img:hover { background: #666; }
#slideshow { /* el rectángulo con las imágenes */
  background-color :#000;
  border: 2px solid #FFF; 
  float: left;
  height: 350px;
  width: 520px;
}
#slides { /* la lista con las imágenes */
  list-style: none;
  margin: 0;
  height: 350px;
  overflow: auto;
  padding: 0;
  position: relative;
  width: 520px;
}
#slides li { /* cada item de la lista es una imagen */
  height: 350px;
  width: 520px;
}
.pagination { /* la paginación inferior */
  float: left;
  list-style: none;
  height: 25px;
  margin: 15px 0 0 32px;
}
.pagination li { /* cada item es un número de orden */
  background: #000;
  border: 1px solid #666;
  color: #888;
  cursor: pointer;
  float: left;
  padding: 5px 8px;
  margin: 0 4px 0 0;
  text-align: center;
}
.pagination li:hover { border: 1px solid #FFF; color: #FFF; }
li.current { border: 1px solid #FFF; color: #FFF; }
</style>

Ahora, vamos a poner el HTML en cualquier parte, por ejemplo, en una entrada, o en un elemento HTML:

<div id="demowrapper">
  <div>
    <!-- la flecha de navegación hacia la izquierda -->
    <div class="sliderbutton"><img src="URL_imagen_izquierda" onclick="slideshow.move(-1)" /></div>
    <div id="slideshow">
      <ul id="slides">
        <li><img src="URL_imagen_1" /></li>
        <li><img src="URL_imagen_2" /></li>
        <!-- seguimos agregando todas las que se nos ocurra -->
      </ul>
    </div>
    <!-- la flecha de navegación hacia la derecha -->
    <div class="sliderbutton"><img src="URL_imagen_derecha" onclick="slideshow.move(1)" /></div>
  </div>
    <!-- la paginación inferior -->
    <ul id="pagination" class="pagination">
    <li onclick="slideshow.pos(0)">1</li>
    <li onclick="slideshow.pos(1)">2</li>
    <!-- seguimos agregando tantas como imágenes siempre con un numero correlativo -->
  </ul>
</div>

Inmediatamente después, llamamos a la función:

<script type="text/javascript">
  var slideshow=new TINY.fader.fade('slideshow',{ id:'slides', auto:3, resume:true, navid:'pagination', activeclass:'current', visible:true, position:0 });
</script>

donde

id:'slides', // es el ID de la lista UL
auto:3, // es la cantidad de segundos entre slides
resume:true, // poner false si no se quiere continuar después de una interrupción
navid:'pagination', // es el ID opcional de la paginación inferior
activeclass:'current', // es la clase que define la paginación actual
visible:true, // muestra la primera imagen al iniciarse
position:0 // el número de orden de la primera imagen