This example is from

Flavor 2

  • Horizontal "Content Buttons"
    • Triggered on Mouseover
  • Numbered Buttons
  • Play/Pause Button
  • Prev & Next Buttons
  • Fading Transition

Code Sample

<link rel="stylesheet" href="agile_carousel.css" type='text/css'>
<div class="slideshow" id="flavor_2"></div>
<script src=""></script>
<script src="agile_carousel/agile_carousel.a1.js"></script>

    $.getJSON("agile_carousel/agile_carousel_data.json", function(data) {
                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"

Agile development tool: This page is shows the JQuery Agile Carousel Plugin with a variety of controls, including those that change on hover. The plugin is intended for agile development. Easily build and customize a rotating banner for your agile web development process.