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 */ }