HTML5: Ejemplo Slider con JQuery – Vanity
Si queremos tener un componentes web 2.0 de forma rápida, eficiente y que sea atractiva visualmente librerias como la de Vanity nos permite lograrlo. En este artículo vamos a desarrollar el componente Slider.
Implementar los componentes de Vanity, es realmente muy fácil. Crearemos una página web donde haremos referencia a las librerias que nos proporcionan, escribiremos el codigo html y lo que necesitemos de css. Luego referenciaremos la funcionalidad del Slider a través de una sola línea y ya tenemos nuestro ejemplo implementado.
Ver Ejemplo Online
Codigo HTML
Lo único que tenemos que tener en cuenta en este caso es que debemos crear tantos divs como imágenes querramos mostrar.
<div class="slider"> <!-- los elementos dentro del slider, tantos como deseemos --> <div> <a href="#"> <img src="http://surpatterns.com/sitio/wp-content/uploads/2012/08/slider_01.jpg" width="600" height="350" border="0" /> </a></div> <div><a href="#"><img src="http://surpatterns.com/sitio/wp-content/uploads/2012/08/slider_02.jpg" width="600" height="350" border="0" /></a></div> <div><a href="#"><img src="http://surpatterns.com/sitio/wp-content/uploads/2012/08/slider_03.jpg" width="600" height="350" border="0" /></a></div> <!-- la navegación la podemos poner donde querramos en el documento --> <a href="#" class="next">→</a> <a href="#" class="prev">←</a> </div><!-- slider -->
Javascript
En este código ingresamos los parámetros que necesitemos. En nuestro ejemplo ingresamos el tipo de animacion, la duracion del intervalo, si tiene imágenes, y el elemento que lo contiene.
$(document).ready(function(){ $(".slider").jSlider({elem:"div",images:true, animation: "random",auto_slide: true, auto_slide_interval:4000, infinite: true, speed: 1200}); });
CSS
Ingresamos el código css para acomodar el Slider.
.slider {width:600px; height:350px; margin:50px auto; position:relative;} a.next, a.prev {color:#000; background-color:#eee; border:1px solid #fff; outline:1px solid #ccc; text-shadow:-1px -1px 0px #fff; text-decoration:none; z-index:99; padding:0px 5px; display:block; } .next {position:absolute; right:-10px; top:50%;} .prev {position:absolute; left:-10px; top:50%;} a.inactive {color:#ccc; background-color:#fff; border:1px solid #eee; outline:none;} /* ul.navi is the generated navigational bullets we generate, you can disable this */ ul.navi {list-style:none; position:absolute; bottom:10px; right:5px;} ul.navi li {float:left; margin-right:5px;} ul.navi li a {background-color:#CCC; display:block; height:10px; width:10px; text-indent:-9999px; outline:none; -moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 0px 0px 2px #000000; -moz-box-shadow: 0px 0px 3px #000000; box-shadow: 0px 0px 1px #000000; } ul.navi li a.active {background-color:#fff;}
Parámetros
Estos son los parámetros que podemos configurar para nuestro Slider:
previous_class = la clase del elemento que navega al item anterior
next_class = la clase que navega al próximo item / slide
inactive = la clase que será seteada a la navegación anterior/posterior cuando están inactivos
elem = los elementos que son los items del slider.
animation = la animacion por default está seteada a fade pero si incluimos el archivo custom_animations.js se pueden utilizar las siguientes : slideDown, slideUp, slideRight, slideLeft, bounce, explode, fold, scale, random.
speed = la velocidad de la animación
navi = verdadero/falso si queremos tener la lista de navegación
navi_active_class = si navi es verdadero podemos elegir una clase para usar el item activo de navegación
navi_class = si navi es verdadero podemos elegir la clase para usar la navegación.
auto_slide = verdadero/falso para que pase de forma automáticamente
auto_slide_interval = tiempo en millisegundos entre slides
auto_pause_hover = si auto_slide esta activo podemos elegir cuando parar el slider cuando pasamos el mouse arriba
click_next = verdadero/falso si queremos activar que pase al siguiente slide con un click
infinite = verdadero/falso. Si está activo cuando llegamos al último slider y clickeamos el botón siguiente pasa al primer slider. Lo mismo para el botón anterior.
images= verdadero/falso. Si es verdadero entonces al cambiar de slide la imagen de fondo del slider es el slide anterior quedando la transición de forma mas natural . Si es falso entonces el fondo es blanco.
Esto ha sido todo el Tutorial en Español HTML5: Ejemplo Slider con JQuery – Vanity
No hay artículos relacionados.
5 comentarios
Skip to comment form ↓
JOHN
22/03/2013, a las 14:37 (UTC -3) Enlace a este comentario
amigo mira yo quiero hacer lo que esta en esta web mira con eso crees que pueda
http://flipboard.com/
Emmanuel
22/03/2013, a las 16:24 (UTC -3) Enlace a este comentario
Te recomiendo que leas el post dentro de SurPatterns referidos al flipbook. Eso es lo que necesitas.
Anónimo
09/05/2013, a las 3:42 (UTC -3) Enlace a este comentario
Donde pongo el javascript
Dann
25/03/2013, a las 19:01 (UTC -3) Enlace a este comentario
en donde pongo el codigo javascript
Mario
24/04/2013, a las 18:18 (UTC -3) Enlace a este comentario
hey justo lo que andaba buscando me sirvió mucho gracias