Karmic Flow – Componente para contenido delizante con jQuery

Karmic Flow es un componente Javascript muy liviano para crear contenido deslizante o presentaciones animadas que utiliza la biblioteca jQuery.

Karmic Flow es sencillo de implementar y posee un montón de opciones de configuración que permite un alto grado de personalización.

Implementación

Para implementar Karmi Flow en nuestros desarrollos necesitamos primero enlazar en la sección HEAD del HTML de la página las bibliotecas:

<script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="j/karmic-flow-0.2.js"></script>

También necesitamos enlazar la hoja de estilos:

<link rel="stylesheet" type="text/css" href="c/karmicFlow.css" />

Crear el código Javascript para que hace que funcione y define el comportamiento:

<script language="javascript">
$(function(){
var start = new Date().getTime();
$('#container').karmicFlow({ auto: true, timer: 2500 });
$('#container5').karmicFlow({ auto: true, timer: 3500 });
$('#container2, #container3').karmicFlow({ duration: 200 });
$('#container4').karmicFlow({ duration: 0 });
$('<p>Total rendering time = ' + (new Date().getTime() - start) + ' ms</p>').appendTo(document.body);
});
</script>

Y por último un código HTML similar al siguiente:

<a class="karmic_flow_prev_controller" href="#" target="container">Prev</a>
<a class="karmic_flow_next_controller" href="#" target="container">Next</a>
<a class="karmic_flow_play_controller" href="#" target="container">Play/Pause</a>
<br />
<br />
<br />
<a class="karmic_flow_controller" href="#slide1" target="container">Uno</b></a>
<a class="karmic_flow_controller" href="#slide2" target="container">Dos</a>
<a class="karmic_flow_controller" href="#slide3" target="container">Tres</a>
<a class="karmic_flow_controller" href="#slide4" target="container">Cuatro</a>

<div id="container" class="karmic_flow_container">
    <ul class="karmic_flow_slider">
        <li class="karmic_flow_slides karmic_flow_slide_selected" id="slide1"><img src="i/p1.jpg" /></li>
        <li class="karmic_flow_slides" id="slide2"><img src="i/p2.jpg" /></li>
        <li class="karmic_flow_slides" id="slide3"><img src="i/p3.jpg" /></li>
        <li class="karmic_flow_slides" id="slide4"><img src="i/p4.jpg" /></li>
    </div>
</div>