jFlow Slider

Name: jFlow Slider
Brand: Jose Aguilar
SKU: joseaguilarblog-3217
Availability: InStock
Rating: 4 (2 reviews)

jFlow plus Slider es un plugin jQuery que nos permite añadir un slider a nuestra Web con navegación mediante flechas de adelante, atrás y bullets.

Su visualización es muy similar a EasySlider.

Para disponer de este slider deberemos incorporar los estilos necesarios en nuestro <head>:

#sliderContainer { width: 940px; height: 300px; position: relative; border-top: 5px solid #999; border-bottom: 5px solid #999; margin: 0 auto; }
.slideContent {  background:url("images/contentBg.png") repeat scroll 0 0 transparent; position: absolute; bottom:0px; right:0px; padding: 10px; width: 920px; }
.slide h3 {  font: 26px/1em 'Rokkitt', serif; color: #FFF;  margin: 0 0 5px 0; }
.slide p { font-size: 14px; color: #FFF; margin: 0; }
.jFlowSlideContainer { overflow: hidden; }
.jFlowSlideContainer a { color: #F90; text-decoration: none; font-style: italic; }
.jFlowSlideContainer a:hover { text-decoration: none; }
.jFlowSlideContainer a:focus { position: relative; top: 1px; }
.jFlowNext { background:url("images/arrows.png") no-repeat scroll 0 -35px transparent; height:130px; position:absolute; top:75px; right: -50px; width:50px; cursor:pointer; }
.jFlowPrev { background:url("images/arrows.png") no-repeat scroll -84px -35px transparent; height:130px; position:absolute; top:75px; left: -50px; width:50px; cursor:pointer; }
.jFlowPrev:hover { background-position: -84px -235px; }
.jFlowNext:hover { background-position: 0px -235px; }

/* controller pagination */
#myController {position: absolute; top: 5px; right: 5px; }
.jFlowControl { background:url("images/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;   }

También deberemos añadir en el <head> la librería jQuery, el plugin y su llamada:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jflow.plus.js"></script>
<script language="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>

Hay que tener en cuenta que dependiendo de la librería jQuery que se utilice puede que no funcione.

Ahora solo falta ver el código HTML:

<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 the Community and giving back.  To keep with this tradition, jFlow Plus now has more of the features you want.</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.  Run this puppy through W3C's validator to see it pass the test!</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.  More features coming soon including more effects and options.</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 Slide Navigation?</h3>
          <p>That's a new feature.  Click on the paging buttons in the top-right to quickly jump to any jFlow slide number.</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>

Compatibilidad:

Opciones:

controller	option	must be class, use . sign
slideWrapper	option	Value must be id, not class
slides	option	The div where all your sliding divs are nested in
selectedWrapper	option	Just pure text, no class or id selector
effect	option	This is the slide effect: «rewind» or «flow»
width	option	This is the width for the content-slider
height	option	This is the height for the content-slider
duration	number	Time in miliseconds to transition one slide (1000 miliseconds = 1 second)
prev	number	Time in miliseconds to pause between slide transitions
next	option	Must be class, use . sign; default: «.jFlowPrev»
auto	boolean	Auto slide option: true or false