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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 voto, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Una respuesta a “Coda Slider”

  1. Daniel dice:

    Me vino de perlas, muchas gracias!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre