Después de un rato probando de solucionar el problema, lo expongo aquí para ver si alguien puede echarme una mano.
El css que tengo es este:
Código:
/*-------------------------------------*/
div#contenedor_principal {
width: 100%;
height: 610px;
margin: 0 auto;
}
div#contenedor_principal > div#contenedor_slider{
border: 0px solid #000;
width: 100%;
height: 610px;
background: #000;
margin: 0 auto;
overflow: hidden;
}
div#contenedor_principal > span.flecha{
z-index: 99;
width: 60px;
height: 61px;
top: 100px;
position: absolute;
cursor: pointer;
}
div#contenedor_principal > span.der{
right: 0px;
background-image: url('http://img197.imageshack.us/img197/6796/flechasy.png');
background-repeat: no-repeat;
background-position: -60px 0;
}
div#contenedor_principal > span.izq{
left: 0px;
background-image: url('http://img197.imageshack.us/img197/6796/flechasy.png');
background-repeat: no-repeat;
background-position: 0 0;
}
div#contenedor_principal > div#contenedor_slider div#slider{
width: 200%; /* este width es sobrescrito en el onload. es equivalente a 2 imágenes */
position: relative;
left: 0;
top: 0;
}
div#contenedor_principal > div#contenedor_slider div#slider img {
width: 100%; /* mismo width de #contenedor_slider */
height: 610px; /* mismo height de #contenedor_slider */
float: left;
}
El código JS está igual que el que me paso IsaBelM en el enlace, y el CSS es casi lo mismo pero jugando con los margins y lo heights y widths para adaptarlo a mi web.
El problema que tengo con el rotativo es que cuando le doy a las flechas para pasar a la siguiente imagen, sólo se desplaza por la primera imagen, es decir, les da un width: 300%. He comprobado que cargue las otras dos imágenes y si que lo hace, pero al desplazarme con las flechas no se ven. Si desde el navegador corrijo el 300% por 100%, cuando me desplazo sólo se ve negro hasta volver a la posición 0 que se ve la imagen original.
He observado que no carga la siguiente imagen, porque el javascript incide en el left, es decir, desplaza las imágenes a la izquierda, pero la segunda y tercera imagen que deben formar el banner las carga debajo de la original y no a su derecha, es decir quedan así:
Imagen 1
Imagen 2
Imagen 3
Cuando deberían quedar: Imagen 1 Imagen 2 Imagen 3.
Lo que no entiendo de todo esto, es que si pongo el código original funciona a la perfección, y sólo cambiando los widths, heights y margins el código muere.
Alguna idea? Gracias :)