«

»

ago 01 2012

avatar

Imprimir esta Entrada

Tutorial en Español HTML5: Ejemplo Slider con JQuery – Vanity

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">&rarr;</a>
<a href="#" class="prev">&larr;</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

Be Sociable, Comparte a SurPatterns!

Acerca del autor

avatar

Emmanuel

Ingeniero en Sistemas. Amante de la programación. Tiene conocimientos de: Java, Visual .Net, C#, Adobe Flex, HTML5, JavaScript, ORMs como Hibernate y las principales bases de datos. También trabajó con otras tecnologías como: People Soft y SAP. Actualmente también escribe artículos para su sitio personal SurPatterns. Pueden seguirlo en twitter a traves de @SurPatterns.

Enlace permanente a este artículo: http://surpatterns.com/sitio/html5-en-espanol-surpatterns/tutorial-en-espanol-html5-ejemplo-slider-con-jquery-vanity/

11 comentarios

Ir al formulario de comentarios

  1. avatar
    JOHN

    amigo mira yo quiero hacer lo que esta en esta web mira con eso crees que pueda

    http://flipboard.com/

    1. avatar
      Emmanuel

      Te recomiendo que leas el post dentro de SurPatterns referidos al flipbook. Eso es lo que necesitas.

      1. avatar
        Anónimo

        Donde pongo el javascript

  2. avatar
    Dann

    en donde pongo el codigo javascript

    1. avatar
      AnzOne

      En el head o también algunos recomiendan antes de cerrar el body.
      Se coloca entre las etiquetas

      $(document)…

  3. avatar
    Mario

    hey justo lo que andaba buscando me sirvió mucho gracias

  4. avatar
    Taniz

    Hola oye me podrias explicar como le haria si no la quiero jalar de otra pagina por que veo que son links como le haria cual seria el codigo para jalarlo de mi carpeta imagenes.


  5. avatar
    juan alonso

    Buenas Tardes Emanuel y muchas gracias por el turial y los recursos,tenia una duda se que los efectos por “default”del slide son los que indicas en animation,pero se podria añadir otro efecto?por ejemplo carrousel?El tema es que le puse el efecto slideleft a mi slide ,pero cuando uso los cursores del slide el de dercha no hay problema pero el de la izquierda hace un paso para atras,es decir al reves cuando yo lo que busco es el mismo efecto que hace en la derecha para la izquierda.
    Muchas gracias de antemano y espero que no sea mucho follón.
    un saludo!

  6. avatar
    LanceJiro

    Esta bien solo que te falto poner los otros javascript que usa para hacer las transacciones de las imagenes por lo demas tuve que ver el fuente para hacerlo bien XD

  7. avatar
    sebastian celemin

    excelente publicación amigo muchas gracias :)me sirvio mucho justo lo que buscaba

  8. avatar
    sebastian celemin

    excelente publicación amigo muchas gracias :) me sirvio mucho justo lo que buscaba sigue asi

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Puedes utilizar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>