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
- 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>
<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>
- 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 -->
<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.