Carousel infinito en jQuery

No es la primera vez que hablamos de un Plugin para jQuery en VitaminaGeek.com, un ejemplo similar a este podría ser el Slider jQuery presentado hace unos meses.

En esta oportunidad traemos carouFredSel, un complemtento que toma cualquier elemento html y lo transforma en un carousel sin limite.

Este carousel puede funcionar horizontal o verticalmente, y puede configurarse para correr automaticamente o al ser activado por el usuario.

La instalación es realmente sencilla:

  1. Descarga en Plugin
  2. Incluye en tu documento HTML los archivos necesarios para el funcionamiento del Carousel:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.carouFredSel.js"></script>
  3. Crea los contenidos que deseas incluir en el carousel, por ejemplo:
    <div id="foo">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
    <img src="img4.jpg" />
    <img src="img5.jpg" />
    </div>
    

    También puedes hacerlo con otros tags, como pueden ser listas o divs. Lo único que debes tener en cuenta es que este armado en un formato válido.

  4. “Ejecuta” el plugin jQuery:
    $(document).ready(function() {
    // Using default configuration
    $("#foo1").carouFredSel();
    // Using custom configuration
    $("#foo2").carouFredSel({
    items : 2,
    direction : "up",
    scroll : {
    items : 1,
    effect : "easeOutBounce",
    duration : 1000,
    pauseOnHover : true
    }
    });
    });

Puedes ver el listado de opciones disponibles en el plugin en el apartado de configuración: http://caroufredsel.frebsite.nl/configuration.php

Enlace: http://caroufredsel.frebsite.nl/

Comentarios

comentarios

Related Posts

One Response

Add Comment