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
Sigueme con tu lector de feeds
Sígueme en Twitter
In Nomine Pixel 
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
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 :)
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
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 :)
Muy bueno el tuto!
Gracias :D
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.
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
no me funciona, lo copié tal cual lo tienes en el demo y nada, solo aparecen las flechas, alguna idea? :(
¿Has incluido jQuery en el HTML?
no anda en el internet explorer :S
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
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
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 ;)
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
Viejo muchas gracias primer tutorial decentemente explicado de jquery en español que consigo.
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?
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
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
Muchas gracias man, me hiciste un parote..
Saludos
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….
gracias por compartir tus conocimientos,esta bueno….:-)
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?
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
Gracias fue de mucha ayuda!
Hola, lo probe en mi localhost con xamp y no me funciona, sin embargo lo cargo directamente y me funciona… ¿Que puede estar pasando?
Funciona impecable. Gracias.
El código js lo copio así como esta en un js mio?? es lo que no entiendo o donde esta librería ??