Instalar Jflow Plus en el Html

Jflow es un slider compatible con la mayoría de navegadores. Solo debes descargarte los archivos de la página Jflow plus v2

  1. Incluir este script dentro de las etiquetas <head> </head> de este modo se esta incluyendo los archivos JS necesarios para el efecto.
<link href="styles/jflow.style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="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: "940px", // this is the width for the content-slider
height: "300px", // 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>

 

  1. Añadir la estructura HTML del slider dentro de un contenedor.
<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>You Asked, jFlow Delivered</h3>
<p>It's all about giving back to the development community.</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 Valid</h3>
<p>Are you a stickler for writing valid code? So is 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>Frequent Code Updates</h3>
<p>This slider is actively developed and used by thousands of websites</p></div>
</div>
<div id="slide4" class="slide">
<img src="images/jflow-sample-slide4.jpg" alt="Slide 3 jFlow Plus" />
<div class="slideContent">
<h3>Notice the Pagination?</h3>
<p>Click on the paging buttons below to navigate.</p>
</div>
</div>
</div>
<div id="myController">
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
</div>
<div class="jFlowPrev"></div>
<div class="jFlowNext"></div>
</div>
<!--end: sliderContainer -->

Para modificar el tamaño del contenedor

Para editar el tamaño del contenedor se debe modifcar el código <script> que se encuentra dentro de la etiqueta <head>. Buscar la línea width y height. Cambiar al tamaño deseado.

Luego entrar al archivo jflow.style.css y editar los atributos de width y height del selector de nombre #sliderContainer.

Publicado en HTML, jQuery