Coda Slider

Coda Slider es un plugin jQuery que nos permite crear contenidos HTML dinámicos que podemos iterar pulsando un botón o automáticamente.

Para disponer de este slider de contenido en tu página Web deberás añadir al <head> de tu página los estilos, la librería jQuery, la customización jQuery, el plugin y su llamada.

<link rel="stylesheet" type="text/css" media="screen" href="./css/coda-slider.css">
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="./js/jquery.coda-slider-3.0.min.js"></script>
<script>
$(function(){
    $('#slider').codaSlider({
        autoSlide:true,
        autoHeight:false
    });
});
</script>

Y dentro del <body> el código de tu contenido HTML:

<div  id="slider">
    <div>
        <h2>Panel 1</h2>
        <img src="images/1.jpg" />
    </div>
    <div>
        <h2>Panel 2</h2>
        <img src="images/2.jpg" />
    </div>
    <div>
        <h2>Panel 3</h2>
        <img src="images/3.jpg" />
    </div>
    <div>
        <h2>Panel 4</h2>
        <img src="images/4.jpg" />
    </div>

</div>

Ver ejemplo en funcionamiento

Descargar o ver más opciones