SummArg | Cursos y recursos para webmasters

24/05/2011

Agile Carousel, múltiples sliders en uno solo

Agile Carousel es un plugin jQuery para lograr diferentes tipos de slideshows de manera facil. Es altamente configurable y utiliza el formato JSON para mayor integración con proveedores externos de imágenes, es ideal para construir tu propio CMS. Pueden descargarse los archivos, junto con sus ejemplos, desde aquí.

Admite los siguientes tipos de vistas:

Básico con paginación

  • Botones de anterior y siguiente que se esfuman al quitar el puntero del mouse del slider.
  • Botones numerados

Código

<link rel="stylesheet" href="agile_carousel.css" type='text/css'>
<div id="flavor_1"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.min.js"></script>
<script>
    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#flavor_1").agile_carousel({
                carousel_data: data,
                carousel_outer_height: 228,
                carousel_height: 228,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,
                transition_time: 300,
                timer: 4000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons",
                no_control_set: "hover_previous_button,hover_next_button"
            });
        });
    });
</script>

Múltiples slides visibles

  • 3 slides visibles
  • Botones circulares

Código

<link rel="stylesheet" href="agile_carousel/agile_carousel.css" type='text/css'>
<div id="multiple_slides_visible"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.min.js"></script>
<script>
    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#multiple_slides_visible").agile_carousel({
                carousel_data: data,
                carousel_outer_height: 230,
                carousel_height: 200,
                slide_height: 200,
                carousel_outer_width: 480,
                slide_width: 160,
                number_slides_visible: 3,
                transition_time: 330,
                control_set_1: "previous_button,next_button",
                control_set_2: "group_numbered_buttons",
                persistent_content: "<p class='persistent_content'>Agile Carousel Example: Multiple Slides Visible</p>"
            });
        });
    });
</script>

Vertical Content

  • Slider de contenido vertical
  • Miniaturas
  • Transición sliding.

Código

<link rel="stylesheet" href="agile_carousel/agile_carousel.css" type='text/css'>
<div id="flavor_3"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>
<script>
    $.getJSON("agile_carousel_data.php", function(data) {
        $("#flavor_3").agile_carousel({
            carousel_data: data,
            carousel_outer_height: 220,
            carousel_height: 220,
            slide_height: 220,
            carousel_outer_width: 480,
            slide_width: 480,
            transition_time: 700,
            timer: 4000,
            continuous_scrolling: true,
            control_set_1: "content_buttons"
        });
    });
</script>

Horizontal Content

  • Botones de contenido horizontales, se activan al pasar el puntero del mouse.
  • Botones numerados
  • Botones de Play y Pause
  • Botones Anterior y Siguiente
  • Transición fade.

Código

<link rel="stylesheet" href="agile_carousel.css" type='text/css'>
<div id="flavor_2"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.js"></script>
<script>
    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({
                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,
                transition_type: "fade",
                transition_time: 600,
                timer: 3000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons,previous_button,
                ... (continues on same line) ... pause_button,next_button",
                control_set_2: "content_buttons",
                change_on_hover: "content_buttons"
            });
        });
    });
</script>

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Agile Carousel es un plugin jQuery para lograr diferentes tipos de slideshows de manera facil. Es altamente configurable y utiliza el formato JSON para mayor integración con proveedores externos de imágenes, es ideal para con…..

  2. Charly

    Hola, soy nuevo en javascript, me agradó este carrusel, pero no he podido insertarlo en una pagina en blanco, para ver como funciona, ¿alguien me podría ayudar?

    Gracias

Dejar un comentario