JavaScript Slideshow for Agile Development

Implement your slideshow with the Agile Carousel JQuery plugin. Highly customizable so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development. This is an all new version written from scratch. JQuery UI effects and the ability to read files on the dedicated server are no longer included. New features are added, such as "Control Sets" which allow for a more customizable setup. Now posted on Github for faster development.

Version: Alpha 1.1
Released: 05/14/11
Files Hosted On: GitHub
Twitter: @edtalmadge

Download

Examples

Click the "View Single Page Example" links to view code samples for each example. All examples are using the same data.

Basic Slideshow
  • Timer
  • Fade Transition
View Single Page Example
Multiple Slides Visible
  • 3 Slides Visible
  • Circle Buttons
View Single Page Example
Flavor 1
  • Prev & Next Buttons Fade In/Out
  • Numbered Buttons
  • Sliding Transition
View Single Page Example
Flavor 2
  • Horizontal "Content Buttons"
    • Triggered on Mouseover
  • Numbered Buttons
  • Play/Pause Button
  • Prev & Next Buttons
  • Fading Transition
View Single Page Example
Flavor 3
  • Vertical "Content Buttons"
  • Sliding Transition
View Single Page Example

Usage

Add a div to your page in the location where you would like to add your slideshow. Invoke the plugin as shown below. Provide data in JSON format as shown below. See the "Settings" section at the bottom of the page for available settings. See the "Single Page Examples" (above) for more implementation examples.

Invoke the Plugin

<link rel="stylesheet" href="agile_carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>

<script>

    // Code used for "Flavor 2" example (above)
    
    $.getJSON("agile_carousel/agile_carousel_data.json", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({
                
                // required settings
                
                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,
                                                
                // end required settings
                                                
                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>

Data

// Data retrieved from 
// https://www.agilecarousel.com/agile_carousel/agile_carousel_data.json
// by $getJSON

[{
"content": "<div class='slide_inner'><a class=' continues... ",
"content_button": "<div class='thumb'><img src=' coninues... "
}, {
... add more object members as needed

// See https://www.agilecarousel.com/agile_carousel/agile_carousel_data.json
// for complete data

}]

Settings

Required and Optional settings for the plugin invocation object. The Controls section lists the different control types that can be used as values for the "control_set_[x]" and "no_control_set" values.

Required Settings

Optional Settings

Controls