<!doctype html>
<html>
<head>
<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 src="scripts/jflow.plus.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myController").jFlow({
controller: ".jFlowControl",
slideWrapper : "#jFlowSlider",
slides: "#mySlides",
selectedWrapper: "jFlowSelected",
effect: "flow", //este es el efecto de deslizamiento (rebobinar o flujo) (rewind or flow)
width: "940px", // esta es la anchura por el contenido deslizante (Solo la imagen, no el ancho de la galeria)
height: "300px", // esta es la altura por el contenido deslizante (Solo la imagen, no el alto de la galeria)
duration: 400, // tiempo en milisegundos para la transición de una diapositiva
pause: 5000, //tiempo entre transiciones
prev: ".jFlowPrev",
next: ".jFlowNext",
auto: true
});
});
</script>
</head>
<body>
<div id="sliderContainer">
<div id="mySlides">
<div id="slide1" class="slide">
<img src="images/jflow-sample-slide1.jpg" alt="Slide 1 jFlow Plus" />
<div class="slideContent">
<h3>Usted lo pidio, jFlow Delivered</h3>
<p>Todo es cuestion de retribuir a la comunidad de desarrollo.</p>
</div>
</div>
<div id="slide2" class="slide">
<img src="images/jflow-sample-slide2.jpg" alt="Slide 2 jFlow Plus" />
<div class="slideContent">
<h3>W3C Valido</h3>
<p>¿Eres un purista de la escritura de codigo valido? Asi es jFlow.</p>
</div>
</div>
<div id="slide3" class="slide">
<img src="images/jflow-sample-slide3.jpg" alt="Slide 3 jFlow Plus" />
<div class="slideContent"><h3>Actualizaciones frecuentes Codigo</h3>
<p>Esta opcion se ha desarrollado activamente y utilizada por miles de sitios web</p></div>
</div>
<div id="slide4" class="slide">
<img src="images/jflow-sample-slide4.jpg" alt="Slide 3 jFlow Plus" />
<div class="slideContent">
<h3>Observa la paginacion?</h3>
<p>Haga clic en los botones de arriba para navegar.</p>
</div>
</div>
</div>
<div id="myController">
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<span class="jFlowControl">4</span>
</div>
<div class="jFlowPrev"></div>
<div class="jFlowNext"></div>
</div>
<!--Fin de la galeria-->
</body>
</html>
