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

Karmic Flow - Captura de pantalla de un slideshow

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>

CSS, Desarrollo, Diseño, Internet, Javascript, Recursos, Software libre, Tutoriales extension jquery, jQuery, plugin javascript, plugin jquery, presentacion, slideshow