Que tal, estoy diseñando la web para un negocio y, como no soy gran conocedor de codigo, estoy usando un slide prediseñado, el tema es que en otra pagina que lo habia usado funcionaba perfectamente, pero en esta con la que estoy ahora no logro que funcione, y no tengo la menor idea de porque, les dejo los codigos a ver encuentran el problema. Cualquier ayuda es ampliamente agradecida, tengo que entregar este trabajo en breve y no se como arreglar este problema.
El HTML (index.html)
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invierno 2015</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<link href="styles/jflow.style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="scripts/jflow.plus.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myController").jFlow({
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlider", // must be id, use # sign
slides: "#mySlides", // the div where all your sliding divs are nested in
selectedWrapper: "jFlowSelected", // just pure text, no sign
effect: "flow", //this is the slide effect (rewind or flow)
width: "100%", // this is the width for the content-slider
height: "500px", // this is the height for the content-slider
duration: 400, // time in milliseconds to transition one slide
pause: 5000, //time between transitions
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext", // must be class, use . sign
auto: true
});
});
</script>
</head>
El CSS (jflow.css) =========================
Código:
@charset "utf-8";
/* CSS Document */
/*------------------------------------------SLIDE-----------------------------*/
#sliderContainer { width:100%; height:500px; position: relative; border-top: 0px solid #999; border-bottom: 0px solid #999; margin: 0 auto;}
.jFlowSlideContainer { overflow: hidden; width:auto; height:auto;}
#mySlides {
margin:0 auto;
}
#slide1 {
position:relative;
}
#slide1 img {
position:relative;
left:-9.5%;
}
#slide2 {
position:relative;
}
#slide2 img {
position:relative;
left:-9.5%;
}
#slide3 {
position:relative;
}
#slide3 img {
position:relative;
left:-9.5%;
}
#slide4 {
position:relative;
}
#slide4 img {
position:relative;
left:-9.5%;
}
/* controller pagination */
#myController {position:absolute; width:60px; top:475px; left:50%; margin-left:-30px}
.jFlowControl { background:url("img/bullet.png") no-repeat scroll 0px 0px transparent; float: left; width: 15px; height: 15px;}
.jFlowControl:hover { background-position: -32px 0px; cursor: pointer; }
.jFlowSelected, .jFlowSelected:hover {background-position: -15px 0px; }
El archivo js jamas lo modifique, no puedo ponerlo acá por que el código es muy largo, pero en si es el mismo archivo que en el otro slide si funciona.