Sliderman: Un script para hacer sliders sin librerías

Este script llamado sliderman.js es una solución aceptable aunque algo compleja para quienes quieren usar sliders de imágenes con algúna clase de efecto animado y no quieran agregar librerías externas de ninguna clase ya que es independiente de todas ellas. Si ya estamos usando una, es indistinto; funcionará con cualquiera porque no las utiliza.

En el sitio original podemos descargar el ZIP que contiene los demos y los archivos necesarios. Ellos muestran tres alternativas diferentes pero, el script es el mismo para todos y lo que variará será la forma en que lo utilicemos; eso, lo hacemos con parámetros personales, CSS y HTML así que las posibilidades son muchas.

Primero agregamos el script antes de </head>, ya sea subiéndolo a un servidor:

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

o poniendo el contenido del archivo directamente en la plantilla:

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

Luego, el CSS que variará según sea el modelo; más adelante pueden ver los que he utilizado para estos ejemplos:

<style>
  ... aquí ponemos las reglas de estilo ...
</style>

El resto lo agregaremos donde querramos mostrar el slider, ya sea en un post o en un elemento HTML y tendremos la posibilidad de agregar varios sin inconvenientes en la misma página, identificando cada uno de ellos con un ID único.

Vamos al primer ejemplo donde utilizo imágenes de 500x375.

<style>
  #slider_container_1 { /* el rectángulo contenedor */
    background: #345;
    height: 375px;
    margin:0 auto;
    padding: 10px;
    width: 500px;
    -moz-border-radius: 10px 10px;
    -webkit-border-radius: 10px 10px;
    border-radius: 10px 10px;
  }
  #SliderName { /* el rectángulo con las imágenes */
    height: 375px;
    margin: auto;
    width: 500px;
  }
  .SliderNamePrev, .SliderNameNext { /* las flecha para ir hacia atrás (son imágenes de 24x24 */
    background: url() no-repeat center center;
    display: block;
    height: 24px;
    position: absolute;
    text-decoration: none;
    top: 155px;
    width: 24px;
  }
  .SliderNamePrev { /* la flecha para ir hacia atrás */
    background-image: url(URL_left.gif);
    left: 10px;
  }
  .SliderNameNext { /* la flecha para ir hacia adelante*/
    background-image: url(URL_right.gif);
    right: 10px;
  }
  .SliderNameDescription { /* el rectángulo con los textos */
    font-family: Verdana;
    font-size: 10px;
    padding: 5px;
    text-align: left;
  }
  #SliderNameNavigation {/* la barra de navegación inferior */
    background-color: #FFF;
    height: 28px;
    margin: 10px 0 0 0;
    text-align: center;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
  }
  /* los enlaces de la barra de navegación son imágenes */
  #SliderNameNavigation a:link, #SliderNameNavigation a:active, #SliderNameNavigation a:visited, #SliderNameNavigation a:hover{
    background: url(URL_nav.gif) no-repeat center center;
    font-size: 0px;
    line-height: 0px;
    margin: 0 2px;
    padding: 10px;
    text-decoration: none;
  }
  #SliderNameNavigation a.active:link, #SliderNameNavigation a.active:active, #SliderNameNavigation a.active:visited, #SliderNameNavigation a.active:hover{
    background: url(URL_nav_active.gif) no-repeat center center;
  }
</style>

<div id="slider_container_1">

  <!-- el DIV con las imágenes y las descripciones -->
  <div id="SliderName">
    <!-- la primera imagen que puede ser un enlace -->
    <a href="URL_a_alguna_parte"><img src="URL_imagen_1"/></a>
    <div class="SliderNameDescription">
      ... aquí ponemos el texto para la imagen 1 ...
    </div>
    <!-- la segunda imagen que puede no ser un enlace-->
    <img src="URL_imagen_2" />
    <div class="SliderNameDescription">
      ... aquí ponemos el texto para la imagen 2 ...
    </div>
    ... y seguimos agregando imágenes siempre con la misma estructura ...
  </div>

  <!-- el DIV con la barra de navegación inferior -->
  <div id="SliderNameNavigation"></div>

  <!-- y ahora, llamamos a al función -->
  <script type="text/javascript">
    // creamos el efecto dándole un nombre cualquiera (por ejemplo demo01)
    Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
    var demoSlider = Sliderman.slider({container: 'SliderName', width: 500, height: 375, effects: 'demo01',
      display: {
        pause: true, // el slider se detendrá al colocar el punterodel ratón encima de una imagen
        autoplay: 3000, // el tiempo entre imágenes (en milisegundos)
        always_show_loading: 200, // forzamos a que se muestre una imagen de loading
        description: {background: '#FFFFFF', opacity: 0.5, height: 50, position: 'bottom'}, // tamaño, ubicación y colores de los textos
        loading: {background: '#000000', opacity: 0.2, image: 'URL_loading.gif'}, // la imagen de loading
        buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // los botones atrás y adelante
        navigation: {container: 'SliderNameNavigation', label: '&nbsp;'} // la barra de navegación
        }
      });
  </script>
</div>

¿Qué significa cada cosa? Hay que andar adivinando un poco aunque en la parte de documentación se explica más o menos de manera detallada.

El segundo ejemplo es similar pero un poco más simple ya que no se agregan textos ni navegación sin embargo, las imágenes se van cambiando utilizando efectos diversos.

<style>
  #slider_container_2 { /* el rectángulo contenedor */
    border: 1px #333 solid;
    height: 375px;
    margin:0 auto;
    width: 500px;
  }
  #SliderName_2 { /* el rectángulo con las imágenes */
    height: 375px;
    margin: auto;
    overflow: hidden;
    width: 500px;
  }
  .SliderNamePrev_2, .SliderNameNext_2 { /* las flecha para ir hacia atrás (son imágenes de 35x50 */
    display: block;
    height: 375px;
    position: absolute;
    text-decoration: none;
    top: 0;
    width: 50px;
  }
  .SliderNamePrev_2 { /* la flecha para ir hacia atrás */
    background: url(URL_left.png) no-repeat left center;
    left: 0;
  }
  .SliderNameNext_2 { /* la flecha para ir hacia adelante*/
    background: url(URL_right.png) no-repeat right center;
    right: 0;
  }
</style>

<div id="slider_container_2">

  <!-- el DIV con las imágenes -->
  <div id="SliderName_2" class="SliderName_2">
    <img src="URL_imagen_1" width="500" height="375"/>
    <img src="URL_imagen_2" width="500" height="375"/>
    ... y seguimos agregando imágenes siempre con la misma estructura ...
  </div>

  <!-- y ahora, llamamos a al función -->
  <script type="text/javascript">
    // creamos varios efectos
    demo2Effect1 = {name: 'myEffect21', top: true, move: true, duration: 400};
    demo2Effect2 = {name: 'myEffect22', right: true, move: true, duration: 400};
    demo2Effect3 = {name: 'myEffect23', bottom: true, move: true, duration: 400};
    demo2Effect4 = {name: 'myEffect24', left: true, move: true, duration: 400};
    demo2Effect5 = {name: 'myEffect25', rows: 3, cols: 9, delay: 50, duration: 100, order: 'random', fade: true};
    demo2Effect6 = {name: 'myEffect26', rows: 2, cols: 4, delay: 100, duration: 400, order: 'random', fade: true, chess: true};
    // los incializamos
    effectsDemo2 = [demo2Effect1,demo2Effect2,demo2Effect3,demo2Effect4,demo2Effect5,demo2Effect6,'blinds'];
    // los ejecutamos
    var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: 500, height: 375, effects: effectsDemo2, display: {autoplay: 3000}});
  </script>
</div>