Do not speak Spanish? Read this post in English.

Lunes, 27 de septiembre de 2010.

Crear tu propio slider con jquery paso a paso

Como otras veces simplemente dejar el apunte del código necesario para hacer algo bastante común en las webs actuales: Un slider.

Existen gran cantidad de plugins de jquery para hacer sliders (aunque yo suelo recomendar el plugin Easy Slider por su sencillez y cantidad de opciones. Si lo único que quieres es disponer de un slider en tu web mejor usa uno de estos plugins. Si en cambio, lo que quieres es un código sencillo con el que empezar a hacer realmente un slider a tu medida -para ahorrarte lineas de javascript innecesario o porque tienes una necesidad que ningún plugin te da- espero que con el siguiente ejemplo puedas ahorrarte algunos minutos u horas de trabajo...

Presento el código en javascript lineal (ni siquiera del todo literal) para que se entienda mejor. Eres libre de crear tu propio plugin de jquery si lo deseas, añadiendo opciones y demás detalles.

Básicamente lo que hacemos es buscar una etiqueta "ul" con la query de jquery indicada dentro de la variable "slider.initQuery" y transformamos este listado en un slider en el que cada li es un elemento. El "ul" se transformará en una caja que tenga por tamaño el ancho y alto del li más grande dentro de la lista.

Aparte de esto se añade la función "slider.go()" que nos permite avanzar -slider.go('next')-, retroceder -slider.go('prev')- o ir a cualquiera de sus elementos -slider.go(5), para ir al elemento 6-. Al final del código se muestra como añadir los botones de anterior y siguiente al Slider.

No acompaño el código de CSS puesto que entiedo que si tienes necesidad de no usar un plugin el css es mejor que corra de tu cuenta. Ahi vamos...

// Esperamos a la carga de la página para empezar...
$(document).ready(function() { 
 
// declaramos slider como objeto javascript...
var slider = {};
 
// Declarando el id para buscar el elemento "ul": 
slider.initQuery = '#slider';
 
// declarando variables iniciales...
slider.slider = $( slider.initQuery + " ul,ul"+slider.initQuery); // seleccionamos el "ul" con jquery
slider.slides = slider.slider.find('li'); // seleccionamos cada uno de sus "li"
slider.number = slider.slides.length; // Contamos el numero de "li" y por tanto slides que tenemos
slider.actual = 0; // marcado para saber que slide estamos viendo, actualmente la primera, o sea la 0
slider.height = 0; // altura del slider... luego la calcularemos
slider.width = 0; // anchura del slider... luego la calcularemos
 
// buscando ancho y alto de <li> máximos para calcular altura y anchura del slider...
for(i=0;i<slider.number;i++)
{
  var w = $(slider.slides[i]).width();
  var h = $(slider.slides[i]).height();
  slider.height = ( h > slider.height  ) ?  h : slider.height;	
  slider.width = ( w > slider.width  ) ? w : slider.width;	
}
 
// formateando el css del <ul> contenedor, la caja del slider...
slider.slider.css({
  overflow: "hidden",
  width: slider.width,  
  height: slider.height,
  position: 'relative'
});
 
// colocando en posicion absoluta todos los <li> del slider, para poder ir haciendo las transiciones...
for (var i=0;i<slider.number;i++)
{
  var sl = $(slider.slides[i]);
  sl.attr('class',sl.attr('class') + " slider-slide-"+i);
  sl.css({
    position : 'absolute',
    left : slider.width * i	
  });
}
 
// funcion para moverse a un slide concreto...
slider.go = function (where) {
  if (where == 'next')
  {
    slider.actual = ( slider.actual < slider.number-1) ? slider.actual*1 + 1 : 0;
  }
  else if (where == 'prev')
  {
    slider.actual = ( slider.actual > 0) ? slider.actual - 1 : slider.number-1;
  }
  else
  {
    slider.actual = where;
  }
 
  for (var i=0;i<slider.number;i++)
  {
    var sl = $(slider.slides[i]);
    sl.animate({
       left : slider.width * (i - slider.actual)
    },2000);
  }
};
 
// creando botones de siguiente y anterior...
$(slider.initQuery).append("<a href='#next' class='slider-prev'>Anterior</a><a href='#next' class='slider-next'>Siguiente</a>");
 
// asignando el evento a los botones de siguiente y anterior...
$(slider.initQuery + " .slider-next").click(function () {
  slider.go('next');
  return false;	
});
$(slider.initQuery + " .slider-prev").click(function () {
  slider.go('prev');
  return false;	
});
 
// evento para el link que nos lleva al elemento 6 del slider...
$('a.ir-al-elemento-6').click(function() { 
  slider.go( 6 );
});
 
 
});

Si necesitamos que el Slider empiece a rotar automáticamente cada 10 segundos, bastaría con:

var autoSlider = setInterval(function () {
	slider.go('next');
},10*1000); // cambia el 10, por el número de segundos que desees.

Y si lo que queremos es crear la típica botonera para poder acceder a cualquier slide y que el botón actual quede automáticamente marcado (class="selected") añadiríamos algo como esto:

var autoSlider = setInterval(function () {
	slider.go("next");
	$("a.slider-button-"+slider.actual).click();
},10000);
 
slider.pages = '<ul class="slider-pages">';
for (var i=0;i<slider.number;i++)
{
  var sclass = (i==0) ? ' class="selected" ' : '';
  slider.pages = slider.pages + '<li' + sclass + '><a href="#slider-slide-'+i+'" class="slider-button-'+i+'">'+ (i+1) +'</a></li>'
}
slider.pages = slider.pages + '</ul>';
 
slider.slider.after( slider.pages );
$('ul.slider-pages li a').click(function () {
	clearInterval(autoSlider);
	slider.go( $(this).attr('href').substring(14) );
	$(this).parent().parent().find("li").attr("class","");
	$(this).parent().attr("class","selected");
	return false;
});

Tras añadirlo dispondremos de un html en forma de lista creado debajo del bloque del slider. Estos elementos los podrémos manipular con css fácilmente:

ul.slider-pages { /* contenedor de la botonera */ }
ul.slider-pages li { /* cada uno de los elementos de la lista*/ }
ul.slider-pages li a{ /* cada link de la lista*/ }
ul.slider-pages li.selected{ /* el botón del slide actual */ }
ul.slider-pages li.selected a{ /* el link del botón del slide actual */ }

Posts Relacionados:

  1. Plugin para crear un Slider con Jquery Easy Slider
  2. Crear graficas con Canvas y Jquery
  3. Crear un plugin de jquery
  4. Como crear nuevos selectores en jquery
  5. 8 Plugins Jquery para Imágenes

Temas Relacionados: jquery tutoriales

Autor:

10 Comentarios para “Crear tu propio slider con jquery paso a paso”

  1. Gracias por el aporte, también muy de moda ahora recomiendo el Nivo Slider, muuuy fácil de usar, con preload de imagenes y todo. Un saludo!

  2. Danilo dice:

    hola, tengo una preguunta como se puede hacer para que cambie mas lento? quiero poner una imagen con texto pero no se alcanza a leer xq va muy rapido. saludos y gracias

  3. franco dice:

    ta muy bueno lo q me gustaria q dejaras el html armado con los divs. seria ideal.

  4. Camilo dice:

    Esta genial , pero me gustaría que publicaras los archivos si no es mucha molestia =) de todas maneras gracias por tu publicación y trabajo

  5. Oscar Cardenas dice:

    Me ayudo bastante es el primer codigo de jquery que analiso y esta bastante entendible ahora es claro sin necesidad de conocer la funcion lo que esta realiza.

    Gracias...

  6. nan dice:

    hola, podrian ayudarme? hace algun tiempo vi en tumblr, unas fotos que cambiaban de una a otra haciendo click en ellas, se podía retroceder o avanzar dandole click en el borde de ellas donde aparecía una flecha, alguien sabe como se llama eso? o como se hace? existe algún programa? por favor agradecería mucho si alguien tuviera la respuesta.
    saludos Nan.

  7. Hans dice:

    Hola es bestial pero para cargar paginas con ese efecto y no imagenes?

  8. ikhuerta dice:

    Hola Hans,

    bastaría con editar internamente donde se genera la etiqueta "img" y pasar a generar una etiqueta Iframe. Lo demás debería funcionar sin problemas.

  9. ikhuerta dice:

    Hola Nan,

    El el propio articulo encontrarás plugins de jquery con efectos un poco más espectaculares.

    Aparte con la aparición de css3 estan apareciendo ahora muchos más plugins. No se si funcionarán como tumblr porque no uso ese servicio pero puedes ecnontrar cosas muy chulas. Este artículo es solo para enseñarte a hacerlo a ti desde 0.

    Te dejo algunos sliders muy interesantes que he ido apuntandome ultimamente para necesidades muy concretas:

    http://rhinoslider.com/

    http://www.woothemes.com/flexslider/

    http://www.fabriziocalderan.it/mosaiqy/index.php

    http://buildinternet.com/project/supersized/

    http://www.pikachoose.com/

  10. Luis J. dice:

    estoy estudiando el tema pero no lo entiendo, en fin tengo 3 imágenes para poner en mi pagina web, las denominé 1.jpg 2.jpg y 3.jpg. donde lo inserto?

Anímate y deja tu comentario