Crear un Slideshow con jQuery

Vamos a crear un slideshow, con jQuery y con un poco de html y css, este slideshow les puede servir para su sitio web o una precentacion.

Nota: Clic en las imagenes para verlas de tamaño completo.



Hola amigos de T!, bueno este tutorial les enseñare a crear un slideshow, para su página web, o crear una web minimalista.

Material:

Scrips jQuery:

LocalScroll

ScrollTo

Creados por: Ariel Flesler

Nota: estos scripts sirven para quitar el scroll, crear el efecto deslizado y funcionalidad de bonotes.

Primer paso, este slideshow lo crearemos con listas dos listas que seran dos div's, un div y una lista seran las imagenes y el segundi div y lista seran los botones para camviar la imagen.

Como ya aprendimos en el como cerar un div y dentro de este una lista no lo explicare a y claro lo linkeamos con nustra hoja de estilos que ya sabes como.



Como podáis ver en slideshow-nav en los links hemos vinculado los id's de la <li> de slideshow esto sirve para que al presionar los botones cambie a esa imagen.

Nota: Ya devemos vincular los scripts java jQuery con nuestro documento html.

Ahora le aplicamos un pequeño estilo y un resit:



El estilo CSS de la página en algo que se asemeja a una presentación de diapositivas. En primer lugar la anchura y la altura de la div presentación está establecido en las mismas dimensiones que las diapositivas de imágenes. Cada una de estas diapositivas es el lado flotaba al lado del otro, por lo que el ancho total de la lista desordenada 4590px (918px x 5 imágenes). Para evitar esta larga serie de imágenes que atraviesa toda la página se utiliza el "overflow" de propiedad. En el CSS vamos a ponerlo en "overflow: scroll;" por lo que la presentación puede trabajar sin Javascript, aunque con una barra de desplazamiento, feo verdad? en lugar de la funcionalidad de deslizamiento fresco.

Para terminar la demostración de una sombra fresca se agrega con CSS3 "box-shadow".





El slideshow-nav div se mueve entonces en su posición por debajo de la sección de presentación principal. Estos botones sólo se pueden utilizar junto con la versión de Javascript, por lo que no queremos que una serie de botones que no funcionan aparece si el usuario no tiene Javascript activado. "visibility: hidden;" se ocultan los botones por defecto, podemos hacerlas visibles de nuevo más tarde si el usuario tiene Javascript activado.

Los anclajes de cada uno de la lista de navegación se transforman en botones circulares con CSS3 "border-radius" y el texto por defecto cambiado fuera de la pantalla con resultados negativos "text-indent".

No lo soportan todos los navegadores en algunos se vera un boton cuadrado en vez de un circulo, para mantener las cosas supercompatibles en todos los navegadores una simple imagen se puede usar.



La presentación de diapositivas hasta el momento se puede ver en un estado de trabajo sin Javascript con sólo la barra de desplazamiento del crudo permite al usuario moverse hacia adelante y hacia atrás entre las imágenes. La mayoría de las presentaciones de Javascript en la web se rompen cuando Javascript está desactivado, dejando los botones que no funcionan y los contenidos que no se puede acceder, así que vamos a obtener puntos extra de accesibilidad al contenido de nuestro aún es visible.





Antes de entrar en la funcionalidad slideshow principal que tenemos un poco de limpieza para arreglar las cosas para los usuarios con JavaScript activado. En primer lugar el CSS del div diapositivas se cambia de "overflow: scroll;" a "overflow: hidden;" para eliminar esa barra de desplazamiento. A continuación, la visibilidad de los botones de navegación está en visible y un "activo" de clase se añade automáticamente al primer botón.

El LocalScroll y plugins ScrollTo se activan con una simple línea. Estamos aplicando la funcionalidad localScroll a los elementos de navegación y presentación de diapositivas, diciéndoles que el objetivo de los elementos presentación de diapositivas en movimiento a lo largo del eje X. Hay muchas opciones más para elegir, incluyendo varios efectos de alivio, pero esto es básicamente todo lo que necesitamos para hacer las cosas en marcha.

Finalmente, queremos asegurarnos de que nuestros botones se iluminan con la clase de activos correspondientes siempre que estén clic en él, por lo que una regla sencilla jQuery elimina la clase activa de todos los botones de la añade a cualquier anclaje que se hizo clic. Esta clase de activo, entonces aparece en la hoja de estilos CSS para darle al botón de un relleno de fondo gris.





Una prueba rápida en el navegador muestra la presentación completa de trabajo en todo su esplendor jQuery. Se desliza suavemente a la transición entre ellos y los botones de navegación se destacan de acuerdo a la diapositiva activa. Nuestra presentación no sólo se ve muy bien aquí, pero también degrada y es accesible incluso si Javascript y CSS está apagado. Los usuarios con navegadores antiguos que ver las diapositivas también, con sólo fantasía CSS3 toques de "box-shadow" y "border-radius" no es visible, pero probablemente nunca lo sabremos lo que se pierden!

Fin. XD



Y para los que no les gusta leer aqui el videotutorial: