Neil Grosskopf muestra en su blog una solución para crear un slider típico de jQuery usando CSS3 puro.
Pero es que además, su solución evita el problema del “Back Button” en aplicaciones que utilizan jQuery, consistente en que mostrar una parte “oculta” usando jQuery no modifica el historial de navegación, de manera que si el usuario presiona el botón “atrás”, no se vuelve a la situación anterior, sino que el navegador pasa a otra localización.
En fin, veamos un ejemplo (aquí una demostración online, más sencilla que la de la entrada original de Neil).
Primero creamos la lista con los elementos, en este caso 3:
<div id="content">
<ul>
<li>
Text 1
</li>
<li>
Text 2
</li>
<li>
Text 3
</li>
</ul>
</div>
Aplicamos las siguientes reglas CSS:
#content, ul, li {
height: 400px;
padding: 10px;
}
#content, li { position: relative; width: 500px; }
#content {
overflow: hidden;
padding: 10px;
float:left;
}
ul {
list-style-type: none;
position: absolute;
left: 0px;
top: 0px;
width: 500px;
height: 2000px;
}
Con este CSS conseguimos que, de los tres elementos li apilados en vertical, sólo se vea uno a un tiempo. Inicialmente el primero, de manera que ahora tenemos que proporcionar el mecanismo para desplazar el elemento ul las cantidades suficientes para ver los elementos 2 y 3, respectivamente.
Empezamos colocando los “anchors” al principio de la página. Serán divs sin contenido, ya que su único propósito es que sirvan como selectores CSS:
<div><div id="p1"></div>
<div><div id="p2"></div>
<div><div id="p3"></div>
Y ahora añadimos las reglas CSS, basadas en esos anchors para desplazar el elemento ul:
#p1:target ul { top: 0px; }
#p2:target ul { top: -420px; }
#p3:target ul { top: -840px; }
Listo. Cuando nuestro navegador apunte al anchor #p1 (o simplemente no apunte a ninguno), veremos el primer elemento. Cuando apunte al #p2, al segundo, y así sucesivamente.
Por último, si queremos dar sensación de fluidez al cambio de un elemento a otro, añadimos la siguiente regla CSS:
ul { -webkit-transition: top .3s linear; }
Pero ojo, esto último sólo funciona para navegadores con soporte WebKit.
Eso es todo. En este link podéis encontrar una demostración (a la que se ha añadido unos enlaces muy simples para permitir pasar de un elemento a otro sin necesidad de modificar la URL) y en este otro un zip con el código.
Via | http://www.nealgrosskopf.com
