Tengo una serie de divs que funcionan como un slider de imagenes (5 imagenes ). El slider funciona con una DIV que funciona como contenedor con la propiedad overflow:hidden y otra que es la que contendrá otras divs que funcionan como subcontendores de contenido. Lo que no queda es cuando pongo los controles de avanzar y retroceder, ya que simplemente el "subcontenedor " es el que se ,mueve derecha o izquierda (dependiendo del botón) con un cambio de propiedad translateX mediante JS.
El problema viene en como hacer la función para que al pulsar los botones avancen las imagenes.
Pongo el código
La funcion JS contenida en index.php
Código HTML:
<script language="javascript" type="text/javascript"> // Sld der _ big var val = 0; function movsld(posx) { var posicion= posx; if (posicion== "der") { var cantidad= val -1000; var sldcant= cantidad + "px"; document.getElementById('top_contenedor_slide_der_imagenes_producto_big_container').style.webkitTransform = "translate("+sldcant+",0)"; document.getElementById('top_contenedor_slide_der_imagenes_producto_big_container').style.MozTransform = "translate("+sldcant+",0)"; document.getElementById('top_contenedor_slide_der_imagenes_producto_big_container').style.MozTransform = "translate("+sldcant+",0)"; var actual =cantidad; } else if (posicion== "izq") { var cantidad = val + 1000; var sldcant = cantidad + "px"; document.getElementById('top_contenedor_slide_der_imagenes_producto_big_container').style.webkitTransform = "translate("+sldcant+",0)"; document.getElementById('top_contenedor_slide_der_imagenes_producto_big_container').style.MozTransform = "translate("+sldcant+",0)"; document.getElementById('top_contenedor_slide_der_imagenes_producto_big_container').style.MozTransform = "translate("+sldcant+",0)"; } val++; } </script>
el códifo del "slider":
Código HTML:
<div id="top_contenedor_slide_der_imagenes_producto_big_container_overflow"> <link href="css/sliders.css" rel="stylesheet" type="text/css" /> <div id="top_contenedor_slide_der_imagenes_producto_big_container"> <!-- INICIO PRODUCTO 1 !--> <div id="top_container_sld_der_contenedor"> <div id="top_container_image_right_text">VERSATILIDAD EN APLICACIÓN </div> <div id="top_container_image_right_text_descripcion"> <div id="top_container_image_right_text_imagen_movid"><img src="images/img1a.png" width="357" height="403"></div> <br> El destellador modelo FLASH A , es una tarjeta electrónica cuya función principal es controlar la velocidad de destello de leds. </div> <div id="boton_leermas"> <div id="boton_leermas_izq">Leer más </div> <div id="boton_leermas_der">>></div> </div> </div> <!-- FIN PRODUCTO 1 !--> <!-- INICIO PRODUCTO 2 !--> <div id="top_container_sld_der_contenedor"> <div id="top_container_image_right_text">MANUFACTURA COMPETITIVA </div><br> <br> <div id="top_container_image_right_text_descripcion"> <br> ¡Un equipo de profesionales cerca de ti!<br /> Garantizando los altos estándares de calidad. </div> </div> <!-- FIN PRODUCTO 2!--> <!-- INICIO PRODUCTO 3 !--> <div id="top_container_sld_der_contenedor"> <div id="top_container_image_right_text">DISEÑO PROFESIONAL</div><br> <br> <div id="top_container_image_right_text_descripcion"> <br> ¡Un equipo de profesionales cerca de ti!<br /> Garantizando los altos estándares de calidad. </div> </div> <!-- FIN PRODUCTO 3!--> <!-- INICIO PRODUCTO 4 !--> <div id="top_container_sld_der_contenedor"> <div id="top_container_image_right_text">VENTAS</div><br> <br> <div id="top_container_image_right_text_descripcion"> <br> ¡Un equipo de profesionales cerca de ti!<br /> Garantizando los altos estándares de calidad. </div> </div> <!-- FIN PRODUCTO 4!--> </div><!-- FIN BIG CONTAINER!--> </div>
y el css del slider :
Código HTML:
/* +++++++++++++++++++S LIDER DER +++++++++++++++++*/
#top_contenedor_slide_der_imagenes_producto_big_container_overflow {
height:400px;
width:1000px;
float:right;
position:static;
z-index:5;
overflow:hidden;
}
#top_contenedor_slide_der_imagenes_producto_big_container {
height:400px;
width:5000px;
float:left;
position:relative;
z-index:4;
}
#top_container_sld_der_contenedor {
width:1000px;
height:400px;
float:left;
background: url("../images/showcase-overlay.png") no-repeat scroll 0px 100% rgb(29, 98, 131);
box-shadow: 0px 1px 1px rgba(225, 225, 225, 0.4) inset, 0px 0px 60px rgba(0, 0, 0, 0.698) inset;
border-radius: 0px 17px 0px 0px;
border: 0px solid rgb(102, 102, 102);
}
/*SLIDE*/
#top_container_image_right_text {
width:500px;
height:120px;
margin: 0px 10px 10px 40px;
position:static;
z-index:2;
text-align:left;
color:#282828;
font-size: 3.3em;
line-height: 60px;
font-weight: normal;
letter-spacing: normal;
font-family: 'Arial Black',sans-serif;
text-shadow: -1px -1px 1px #769AAC;
font-weight: 900;
float:left;
padding-top:20px;
}
#top_container_image_right_text_descripcion {
width:450px;
height:120px;
margin: 10px 10px 10px 40px;
position:static;
z-index:2;
font-size: 18px;
line-height: 30px;
font-weight: normal;
letter-spacing: normal;
font-family: 'Nevi',Helvetica,Arial,sans-serif;
font-weight: 900;
color: rgb(255, 255, 255);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);
}
#boton_leermas {
width:150px;
height:41px;
background-color:#C84523;
margin: 0 0 0 70px;
position: absolute;
float:left;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
border: 0px solid #666666;
-webkit-box-shadow: -1px 0px 25px rgba(0, 0, 0, 0.57);
-moz-box-shadow: -1px 0px 25px rgba(0, 0, 0, 0.57);
box-shadow: -1px 0px 25px rgba(0, 0, 0, 0.57);
left: 271px;
top: 299px;
}
#boton_leermas_izq {
width:80px;
height:40px;
border-right: #A34027 double 1px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color:#FFFFFF;
padding-top: 10px;
padding-left:10px;
padding-right:10px;
float:left;
}
#boton_leermas_der {
width: 20px;
height: 20px;
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 20px;
font-weight: bold;
color: rgb(255, 255, 255);
float: right;
margin: 8px 16px 0 0;
}
#top_container_image_right_text_imagen_movid{
width:460px;
height:461px;
position:absolute;
z-index:99;
text-align:center;
color:#282828;
font-size: 36px;
line-height: 30px;
font-weight: normal;
letter-spacing: normal;
font-family: 'Nevi',Helvetica,Arial,sans-serif;
text-shadow: -3px -3px 3px #769AAC;
font-weight: 600;
/*float:right;
margin-right:30px;*/
margin-top:20px;
padding-top:20px;
left: 527px;
top: -41px;
}
/* FIN SLIDER DER *****************/
Estos son los botones de avanzar y regresar (son imagenes nada más en la div )
Código HTML:
<a href="#" onClick="movsld('izq')";><div id="boton_avanzar_der"></div></a> <a href="#" onClick="movsld('der')";><div id="boton_avanzar_izq"></div></a>
Muchas gracias por su ayuda.
