Transiciones, sliders y slideshows

Las transisiones con CSS no están limitadas a efectos hover que permutan propiedades de un solo elemento; pueden ser aplicadas de otras formas para reaccionar a clicks, pero, en ese caso, como siempre, debemos recurrir al JavaScript para que los navegadores interpreten lo que queremos hacer.

En un primer ejemplo, armamos una especie de lista con imágenes del mismo tamaño que funcionará de manera similar a un slider:

<div id="demoANIM1">
  <div id="demoANIM1imagenes">
    <img src="URL_IMAGEN1" />
    <img src="URL_IMAGEN2" />
    <img src="URL_IMAGEN3" />
    <-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
    <img src="URL_IMAGEN7" />
  </div>
</div>

Puesto así, las veremos una al lado de la otra o una debajo de la otra dependiendo de sus tamaños o del editor que empleemos.

No importa, ahora le agregaremos algunos enlaces para "navegar" ya sea arriba o abajo de lo anterior:

<div id="demoANIM1links">
  <a onclick="srcdemoANIM1(0);" href="javascript:void(0);">1</a>
  <a onclick="srcdemoANIM1(1);" href="javascript:void(0);">2</a>
  <a onclick="srcdemoANIM1(2);" href="javascript:void(0);">3</a>
  <-- agregamos un enlace para cada una de las imágenes -->
  <a onclick="srcdemoANIM1(6);" href="javascript:void(0);">7</a>
</div>

Veremos los numeritos que son enlaces y que por ahora no harán nada. Nos falta el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:

<style>
  #demoANIM1 { /* es el DIV contenedor */
    /* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */
    height: 375px;
    width: 500px;
    margin: 0 auto; /* lo centro */
    overflow: hidden; /* impido que se deborde */
    position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */
  }
  #demoANIM1imagenes { /* es el contendor interno donde están las imágenes */
    /* lo fijo arriba */
    position:absolute;
    left: 0;
    top: 0;
    /* le digo que su ancho es igual a la suma del ancho de todas imágenes */
    width: 3500px; /* 500 * 7 = 3500 */
    /* y le digo que cualquier cambio sea animado */
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s.ease-in-out;
    -o-transition:all 1s.ease-in-out;
    transition:all 1s ease-in-out;
  }
  #demoANIM1imagenes img { /* fuerzo a que las imágenes se vean todas iguales */
    height: 375px;
    width: 500px;
  }
  /* y le pongo un poc de estilo a los numeritos que sirven de enlace */
  #demoANIM1links {
    border-bottom: 1px solid #345;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 500px;
  }
  #demoANIM1links a {
    background-color: #345;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 4px #ABC inset;
    margin: 0 2px;
    padding: 4px 8px;
  }
  #demoANIM1links a:hover {
    box-shadow: 0 0 8px #ABC inset;
    color: #FFF;
  }
</style>

Lo que veré ahora será una sola imagen (la primera) y si le quitara la propiedad overflow, vería una tira larga con las siete imágenes, una al lado de la otra ya que todas se encuentran dentro de un contenedor que es el que desplazaremos, modificando la propiedad left.

Para eso necesito un script que es lo que se ve en el atributo onclick de los enlaces.

<script>
//<![CDATA[
  function srcdemoANIM1(num) {
    var mover = num * 500;
    document.getElementById("demoANIM1imagenes").style.left = -mover + "px";
  }
//]]>
</script>

Es una función simple, llega con un numero de orden (de 0 a 6 en este caso), lo multiplica por el ancho de la imagen y reposiciona el DIV contenedor de las imágenes una cierta cantidad de pixeles, moviéndolo (número negativo) hacia la izquierda. Como hemos establecido las propiedades de transición, eso se verá con un efecto deslizante en Firefox 4, Safari, Chrome y Opera.

1234567