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 
  • máximos para calcular altura y anchura del slider... for(i=0;i slider.height ) ? h : slider.height; slider.width = ( w > slider.width ) ? w : slider.width; } // formateando el css del
      contenedor, la caja del slider... slider.slider.css({ overflow: "hidden", width: slider.width, height: slider.height, position: 'relative' }); // colocando en posicion absoluta todos los
    • del slider, para poder ir haciendo las transiciones... for (var i=0;i 0) ? slider.actual - 1 : slider.number-1; } else { slider.actual = where; } for (var i=0;iAnteriorSiguiente"); // 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 = '
      '; for (var i=0;i'+ (i+1) +'' } slider.pages = slider.pages + '
    '; 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 */ }
    

    10 respuestas a “Crear tu propio slider con jquery paso a paso”

    1. 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

    2. 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

    3. 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…

    4. 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.

      • 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.

    5. 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?

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *