Esta es mi adaptacion.
Como hago para que los botones next y prev queden fijos con el absolute y no modifiquen su posicion cuando se centra la pagina automaticamente.
Código CSS:
Ver original#slides {
width:800px;
margin-top:10px;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width:800px;
overflow:hidden;
position:relative;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:800px;
height:270px;
display:block;
}
.slides_container a img {
display:block;
}
/*
Next/prev buttons
*/
#slides .next,#slides .prev {
position:absolute;
margin-top: -100px;
margin-left: -150px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
left:585px;
}
Código HTML:
Ver original <div class="slides_container"> <a href="#" title="lala" target="_blank"><img src="/img/wall1.jpg" width="800" height="270" alt="Slide 1"/></a> <a href="#" title="lala" target="_blank"><img src="/img/wall2.jpg" width="800" height="270" alt="Slide 2"/></a> <a href="#" title="lala" target="_blank"><img src="/img/wall3.jpg" width="800" height="270" alt="Slide 3"/></a> <a href="#" title="lala" target="_blank"><img src="img/wall4.jpg" width="800" height="270" alt="Slide 4"/></a> <a href="#" title="lalala" target="_blank"><img src="/img/wall1.jpg" width="800" height="270" alt="wall1"/></a> <a href="#" title="lala" target="_blank"><img src="/img/wall2.jpg" width="800" height="270" alt="Slide 6"/></a> <a href="#" title="lala" target="_blank"><img src="img/wall3.jpg" width="800" height="270" alt="Slide 7"/></a>
<a href="#" class="prev"><img src="/img/arrow-prev.png" width="24" height="43" ></a> <a href="#" class="next"><img src="/img/arrow-next.png" width="24" height="43" ></a> -