lunes, 26 de agosto de 2013

Mostrar varias imágenes con controles anterior y siguiente (Carrousel simple) con jQuery

Damian 8/26/2013

Hace poco me pidieron realizar un ejemplo sencillo sobre un carrousel simple con jQuery ,este carrousel muestra imágenes por medio de dos controlesAnterior ySiguiente puede ser útil no solo para mostrar imágenes si no cualquier uso que le demos como por ejemplo: mostrar formularios para un registro o cual quier otro uso.
aquí puedes ver un demo de ello ↓↓



Como lo hacemos?
primero debemos de estructurar nuestro carrousel ya sea el uso que le demos las partes o contenedores que necesitamos son la cabecera (header)en donde tengo los nombres de las imágenes y la parte central que son todassection son los contenedores de las imágenes cada una con un ID diferente.
ahora por medio de jQuery necesito extraer cuantos contenedoressection tengo, para eso le digo alselect de jQuery que me busque en el contenedor cuyo ID escont_paneles y añadiendo el signo de mayor que"" yel elementosection elselect nos retornara un array con todos los elementos encontrados.

var section = jQuery('#cont_panelessection');


Ahora vamos a ocultar todos los elementossection para ello antenpongo en la variablesection el métodohide();(ocultar)este método me oculta todos los elementos pero necesito que el primer elemento este visible entonces llamo al métodofirst();(primero) este método me seleccionara el primer elemento pero aun sigue oculto, entonces llamo al métodoshow(); (mostrar) con eso podre mostrar el primer elemento y dejar a los otros ocultos.

var section = jQuery('#cont_panelessection');
section.hide().first().show(); 
var mostrar_section = 0;


también creo una variable de tipo entero cuyo valor sea cero, como les dije anterior mente elselect nos retorna un array que esta almacenado en la variablesection,entonces necesito recorrer ese array ese elemento para eso utilizo el métodoeq() este método me recibe el indice o la posición del elemento que necesito manipular o en este caso ocultar o mostrar.

section.eq(mostrar_section).hide();
mostrar_section = (mostrar_section + 1  section.length) ? mostrar_section + 1 : 0;
section.eq(mostrar_section).show();



luego hago un pequeño control para incrementar las posiciones y dar paso a que se muestren las otrassection cada que vez que se haga click en el botón siguiente.
de la misma forma pero decrementando podemos retroceder las imágenes en este caso seriaanterior .


var section = jQuery('#cont_panelessection');
 var botones=  jQuery('#cont_cabezainput[type="button"]');
    var mostrar_section = 0; 
 var pintar_boton=0;
 
    section.hide().first().show(); 
 botones.first().addClass('activa_button');
 
    jQuery("#bto_siguiente").click(function() {
        section.eq(mostrar_section).hide();//oculto el primer panel que esta en la posicion 0
  botones.eq(pintar_boton).removeClass('activa_button');
        mostrar_section = (mostrar_section + 1  section.length) ? mostrar_section + 1 : 0;
  pintar_boton=(pintar_boton + 1  botones.length) ? pintar_boton + 1 : 0;
        section.eq(mostrar_section).show(); // muesta el siguiente
  botones.eq(pintar_boton).addClass('activa_button');
    });
 
    jQuery("#bto_anterior").click(function() {
        section.eq(mostrar_section).hide();
  botones.eq(pintar_boton).removeClass('activa_button');
        mostrar_section = (mostrar_section  0) ? mostrar_section - 1 : section.length - 1;
  pintar_boton = (pintar_boton  0) ? pintar_boton - 1 : botones.length - 1;
        section.eq(mostrar_section).show(); // muestra el anterior
  botones.eq(pintar_boton).addClass('activa_button');
    });



les dejo el código fuente completo


DESCARGAR







, ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)