Tutorial: El slider mas sencillo con jQuery

15 feb

En este tutorial, vamos a crear un sencillo slider con desplazamiento horizontal, con un efecto inspirado en la web de Coda pero orientado a que cualquier principante pueda entenderlo, y por que no, tomarlo como base para crear un slider con muchas mas funciones.

Antes de nada, echadle un ojo al efecto final y manos al la obra.

HTML

Esta parte, seguro que no tiene ningún misterio para nadie:

<div id=”slider”>

<div class=”slidesContainer”>

<div class=”slide”><img src=”img/img01.jpg” alt=”Coche 01″ /></div>

<div class=”slide”><img src=”img/img02.jpg” alt=”Coche 02″ /></div>

<div class=”slide”><img src=”img/img03.jpg” alt=”Coche 03″ /></div>

</div> <!– /slidesContainer –>

</div> <!– /slider –>

Con #slider, hacemos referencia al contenedor principal y con .slidesContainer albergamos los slides. En la parte de Javascript veremos mas claramente por que usamos dos contenedores.

CSS

La hoja de estilo tampoco tienen ninguna complicación:

#slide{

width: 600px;

height: 350px;

overflow: hidden;

position: relative;

}

A parte de las medidas, debemos aplicar overflow:hidden ya que .sliderContainer va a tener la anchura de todos los slides sumados, por lo que sin ocultar el overflow las imagenes se desbordarían por un lado.

A parte he aplicado position: relative por que en algunos casos Internet explorer tiene problemas calculando las medidas si la posición no es relativa, así que prefiero curarme en salud.

La otra parte importante son los propios slides:

.slide{

width: 600px;

height: 350px;

float: left;

}

Lo importante de los slides es que deben flotar a la izquierda y que tengan las mismas medidas que el contenedor principal.

Javascript

Sintiéndolo no voy a escribir aquí cada parte del código, ya que después de intentarlo, era bastante difícil leerlo, así que he decidido llenar de comentarios el código y ha quedado bastante comprensible. Podéis consultar el código directamente aquí.

Lo que si voy a hacer es explicar las partes del código resumidamente.

  • Almacenamos la información de los slides para poder calcular los tamaños y sumarlos
  • Creamos la función sliderScroll() que nos permite crear el scroll tanto a izquierda como a derecha, mediante la opción direction
  • Creamos un temporizador (setInterval) para automatizar el scroll cada 5 segundos.
  • Asignamos a los botones sus respectivas funciones mediante sliderScroll().
  • Por último, cada vez que pulsamos un botón, reiniciamos el temporizador.

¡Está vivo!

Para todos los que no se atrevan a probar este efecto, os aseguro que hasta el mas novato puede entender que estamos haciendo y es una buena base para integrar mas funciones, como vinculos que vayan a cada slide, crear una galería de fotos con títulos y textos, etc…

Y como siempre, espero que haya sido de ayuda y podéis distribuirlo sin ningún problema, aunque agradecería una referencia al autor :)

Links: Descargar código | Demo

About these ads

30 comentarios hacia “Tutorial: El slider mas sencillo con jQuery”

  1. gabriel 14 abril 2010 a 04:06 #

    Hola… sabes que tengo un problema con un slide que he echo… todo pasa bien pero tengo que agregarle un texto asociado a la imagen y no logro hacerlo a ver si me puede ayudar… mira en

    HTML esta asi..

    $(document).ready(function(){

    $(“#slider”).easySlider(
    {

    controlsBefore: ”,
    controlsAfter: ”,
    auto: true, speed: 1000, pause: 5000, continuous: true
    }

    );

    });

    Aqui tiene que ir el titulo de la imagen

    el proyecto realizado por la empresa internacional BUSHSHSHjasjajsj siamd m , jasdkj jkasdkjj jdsakj sdajk dajk sdj kajk jk asdfkjj asd jkasdjk a

    si te fijas agrege dos DIV donde tengo que poner los textos que tengo que asociar a las imagenes respectivas que van rotando

    tengo el CSS echo y esta OK, pero no se como porner el textop que tiene que cambiar junto con la imagnes, habia empezado a hacerlo con el title de la imgen pero finalmente no me resulto

    espero que me puedas ayudar

    gracias

    • ozzysong 14 abril 2010 a 08:08 #

      Lo cierto es que no entiendo muy bien lo que estás explicando. Además, no has copiado el HTML, solo has copiado parte del código jQuery.

      Lo siento, pero si no te explicas mejor no puedo ayudarte :)

  2. gabriel 14 abril 2010 a 12:42 #

    a hola, gracias, te copio todo el codigo, tengo un html donde tengo un banner que tiene un slide, para ir pasando los banners uno a uno
    eso funciona bien,… el problema es que con cada banner necesito que aparezca un texto que es información de cada uno de ellos.

    entonces hice un css donde en un DIV aparece un texto que por ahora es unico (para los 4 banners) pero lo que requiero es que cambie junto con cada banner y que sea con la informacion de cada banner

    te copio el html completo

    HTML———————–

    $(document).ready(function(){

    $(“#slider”).easySlider(
    {

    controlsBefore: ”,
    controlsAfter: ”,
    auto: true, speed: 1000, pause: 5000, continuous: true
    }

    );

    });

    Aqui tiene que ir el titulo de la imagen

    el proyecto realizado por la empresa internacional BUSHSHSHjasjajsj siamd m , jasdkj jkasdkjj jdsakj sdajk dajk sdj kajk jk asdfkjj asd jkasdjk a

    ———————

    el css es este

    —————–

    .trans{
    background-color:#4cc1ed;
    color:#FFFFFF;
    position:absolute;
    top:437px;
    width:205px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;

    }
    .titTrans{

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color:#FFFFFF;
    font-weight: bold;
    }

    .textTrans{

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color:#FFFFFF;
    }

    img{border:none;}
    pre{
    display:block;
    font:12px “Courier New”, Courier, monospace;
    padding:10px;
    border:1px solid #bae2f0;
    background:#e3f4f9;
    margin:.5em 0;
    width:957px;
    }

    #container{
    margin:0 auto;
    position:relative;
    text-align:left;
    width:957px;
    background:#fff;
    margin-bottom:2em;
    }
    #header{
    height:800px;
    background:#5DC9E1;
    color:#fff;
    }
    #content{
    position:relative;
    }

    /* Easy Slider */

    #slider{}
    #slider ul, #slider li, #slider2 ul, #slider2 li{
    margin:0;
    padding:0;
    list-style:none;
    }
    #slider li, #slider2 li{
    /*
    define width and height of list item (slide)
    entire slider area will adjust according to the parameters provided here
    */
    width:957px;
    height:265px;
    overflow:hidden;
    }

    #slider2 li{
    background:#f1f1f1;
    }
    #slider2 li h2{
    margin:0 20px;
    padding-top:20px;
    }
    #slider2 li p{
    margin:1px;
    }

    p#controls, p#controls2{
    margin:0;
    position:relative;
    }

    #prevBtn, #nextBtn, #prevBtn2, #nextBtn2{
    display:block;
    margin:0;
    overflow:hidden;
    text-indent:-8000px;
    width:30px;
    height:77px;
    position:absolute;
    left:1px;
    top:-167px;
    }
    #nextBtn, #nextBtn2{
    left:30px;
    }
    #prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{
    display:block;
    width:30px;
    height:77px;
    background:url(images/btn_prev.jpg) no-repeat 0 0;
    }
    #nextBtn a, #nextBtn2 a{
    background:url(images/btn_next.jpg) no-repeat 0 0;
    }

    FIN CSS——————–

    eso es… si te fijas hay una caja celeste que hice con el CSS, y tiene dos tipos de tipografias para el titulo del texto y para un mensaje… habia tratado de hacerlo con el title asociado a cada imagene pero ahi tendria el problema que no voy a poder poner un titulo de la imagen diferente del mensaje

    te copio la URL para que lo veas en funcionamiento…

    http://www.mercator.cl/taller/magia/

    mucha gracias por la ayuda de antemanto

    gabriel

    • ozzysong 14 abril 2010 a 14:17 #

      Creo que ya se lo que quieres decir.

      La cosa sería usar el texto del atributo title o rel de la imagen, o en todo caso, meter dentro de cada li otro contenedor con el título que quieras aplicarle a cada “slide”.

      Igual que tienes la caja transparente encima del slider posicionada de forma absoluta, lo podrías hacer con una caja para cada slide.

      Espero haberme explicado, sino, aquí estamos para ayudar :)

  3. tonatiuh 5 agosto 2010 a 02:27 #

    Muy bueno el tuto!

  4. tonatiuh 24 enero 2011 a 06:07 #

    Que tal, excelente el tutorial, en base al codigo que nos expone aquí Osiris, cree el plugin para el slider, lo comparto:
    http://www.box.net/shared/s134oecppj

    Saludos desde Colima, Méx.

    • EDWIN 22 octubre 2012 a 23:16 #

      excelente proyecto pero tengo una duda, si quiero usar este slider con las dimensiones 1280×768 o por 1980×1080, cuales son los divs que tengo que modificar ya que lo he intentado pero ninguno me da resultado, saludos

  5. carlos 27 enero 2011 a 01:01 #

    no me funciona, lo copié tal cual lo tienes en el demo y nada, solo aparecen las flechas, alguna idea? :(

  6. Lucho 23 febrero 2011 a 00:10 #

    no anda en el internet explorer :S

  7. caman09 11 marzo 2011 a 19:58 #

    Hola.. está muuy bueno el tuto, solo no comprendo del todo en que parte de mi html debo poner mi archivo mainfunctions.js me podrías orientar?? GRACIAS DE ANTEMANO

  8. Patrick 7 junio 2011 a 05:47 #

    Hola,!! espero todavia contestes esto, jeje esque mira que quiero hacer el slider para unas imagenes mas grandes.. (850 x 550) pero no lo consigo, se ocultan las flechas de siguiente y atras, Perdon esque soy nuevo, no se casi nada de html. menos de css.. jeje

  9. Juanplav 16 agosto 2011 a 00:04 #

    Hola Osiris,
    sé que este es un post viejo, pero quería saber si existe alguna manera de optimizar este código para que corra en Internet Explorer?

    Estuve buscando muchos sliders, y este es el que me pareció más fácil, puesto que no sé jQuery. Y no quiero cambiar lo ya diseñado (html, css) :P

    Gracias ;)

  10. marito 21 agosto 2011 a 22:01 #

    Que tal soy nuevo en esto y no se como aplicar esto que explicas, como lo uso

    Yo uso deramweaver, entonces que hago ? copio el codigo que pones en dearmweaver?

    no entiendo nada de como usar esto de jquerry.

    Como se usa desde 0 hay que bajar un programa???

    Saludos

  11. Lakhsmi Angarita 2 febrero 2012 a 17:54 #

    Viejo muchas gracias primer tutorial decentemente explicado de jquery en español que consigo.

  12. Lucas 7 febrero 2012 a 18:52 #

    Hola, muchas gracias por el codigo, solo una pregunta, se podria hacer, para que no pase desde la ultima imagen a la primera cuando llega a la ultima imagen?

  13. Gus 28 febrero 2012 a 15:08 #

    http://reallysimpleworks.com/slideshow/

    Hola yo encontré este tutorial, está bastante bien y contiene varios ejemplos de slider con texto para pie de foto… espero haber contribuido en algo…. suerte,,,

    y gracias al compañero que ha colgado el tuto con el slider de los coches… no tiene precio el esfuerzo de trabajar en algo para compartirlo con los demás…. muchisimas gracias… un saludo

  14. Mariano 1 marzo 2012 a 20:18 #

    Hola, una pregunta, como hago para agregarle unos botones que al hacer clic vaya a los diferentes slides, es decir, en vez de los botones next y previous, unos 5 botones que lleven a cada uno de las imagenes correspondientes.
    Gracias por la respuesta.
    Saludos.
    Mariano

  15. victorhdzvl 21 mayo 2012 a 08:45 #

    Muchas gracias man, me hiciste un parote..

    Saludos

  16. Fernando 7 agosto 2012 a 20:18 #

    Hola, que tal. Buen tutorial. Muchas gracias.
    Una pregunta. Cómo hacer para que en vez de los botones de flechitas de un lado a otro, el slide cuente con botones de texto y que vaya a una posición específica… es decir, que la barra de botones (ej. uno, dos, tres, cuatro, cinco) se pasen de la primera a la quinta posición… de la tercera a la primera posición… etc….

  17. sky071460 3 septiembre 2012 a 04:10 #

    gracias por compartir tus conocimientos,esta bueno….:-)

  18. jeazu 1 octubre 2012 a 11:18 #

    Hola, gracias por este estupendo tutorial, pero tengo un problema cuando trato de integrar en el mismo html dos Slides solo me funciona uno ya que presiono en el next del segundo slider y la imágen que se desliza es la imágen del primer slider.
    ¿Que es el lo que tengo que hacer para solucionarlo?

  19. grafivoro 5 octubre 2012 a 00:00 #

    Hola Osiris
    He probado este slider poniendo la “galería” directamente dentro del body del html, y funciona muy bien. Pero si lo pongo dentro de un div dentro del body, no funciona. Cómo podría solucionar esto?? hay forma?? Desde ya muchas gracias.
    Muy buen post

  20. JmCrash 13 octubre 2012 a 17:01 #

    Gracias fue de mucha ayuda!

  21. Jesus 26 octubre 2012 a 22:48 #

    Hola, lo probe en mi localhost con xamp y no me funciona, sin embargo lo cargo directamente y me funciona… ¿Que puede estar pasando?

  22. Karancho 30 diciembre 2012 a 06:13 #

    Funciona impecable. Gracias.

  23. Luis Arturo López Loría 22 julio 2013 a 17:18 #

    El código js lo copio así como esta en un js mio?? es lo que no entiendo o donde esta librería ??

Trackbacks/Pingbacks

  1. Bitacoras.com - 15 febrero 2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: En este tutorial, vamos a crear un sencillo slider con desplazamiento horizontal, con un efecto inspirado en la web de Coda pero orientado a que cualquier principante pueda entenderlo, y por que no, tomarlo como base para cre…..

  2. Crear un slider sencillo con jQuery - 15 febrero 2010

    [...] Crear un slider sencillo con jQuery innominepixel.wordpress.com/2010/02/15/tutorial-el-slider-ma…  por ozzysong hace 3 segundos [...]

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: