Plugins

User login
Can't find a Plugin?

Can't find a Plugin you are looking for? Check out the jQuery Wiki page.

Are you a plugin developer? Please move your plugin over to this site.

Website Bug or Feature Request?

Found a bug on the new jQuery Plugin website? Have a feature request?

Submit it to the jQuery Plugin website issue queue to ensure it is noticed!

Agile Carousel


Average rating
(10 votes)

Currently in beta version. Not tested for security. Security & Feature enhancements on the way!

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

View Examples!

Featured Example:
http://www.5bosses.com/examples/agile_carousel/multi_example/carousel.ht...
All the Bells & Whistles:
http://www.5bosses.com/examples/agile_carousel/full_example/carousel.htm...
JQuery UI example:
http://www.5bosses.com/examples/agile_carousel/jqueryui_example/carousel...
simple example:
http://www.5bosses.com/examples/agile_carousel/simple_example/carousel.h...

Download

http://code.google.com/p/agile-carousel/downloads/list

Example Plugin Usage

Add the provided file "make_slides.php" to the same directory as the document that contains the slideshow. The file "slideshow.css" should also be used & modified as needed. JQuery UI may or may not need to be added depending on the settings you enter for easing and transition options. See list below.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="slide_behavior_min.js"></script>
<script type="text/javascript">

$('#slide_holder').agile_carousel();

</script>

Plugin Options

  • disable_on_first_last: "yes" or "no"
  • first_last_buttons: "yes" or "no"
  • first_slide_is_intro: "yes" or "no". If "yes", then first slide will play only once.
  • hover_next_prev_buttons: "yes" or "no"
  • intro_timer_length: enter length in milliseconds (surrounded by quotes) that the intro should play
  • intro_transtion: "fade" or do not declare
  • next_prev_buttons: "yes" or "no"
  • number_slides_visible: enter the number of slides (surrounded by quotes) that should be visible on the stage
  • pause_button: "yes" or "no"
  • slide_buttons: "yes" or "no"
  • slide_captions: enter list of slide captions in this format: cap 1 | cap 2 | etc.
  • slide_directory: enter path to directory containing slide files
  • slide_doctype: "html" or "xhtml"
  • slide_links: enter comma separated list of links to apply to jpg, gif or png slides (only)
  • slide_number_display: "yes" or "no"
  • slide_timer_length: enter length in milliseconds that each slide should appear on stage
  • slide_timer_on: "yes" or "no"
  • transition_duration: enter length in milliseconds for all slide transition
  • transition_easing: enter easing type (see below list of choices)
  • transition_type: enter transition type (see below list of choices)
  • jquery_ui_effect_param: for UI effect transitions. Enter option name
  • jquery_ui_effect_value: for UI effect transitions. Enter option value
  • water_mark: enter text that will appear in the carousel and not be affected by transitions.

Standard Jquery transition types that do not require JQuery UI

  • carousel
  • fade
  • no_transition_effect
  • scroll_right

Transition Types That Do Require Jquery UI

If an effect or option is not on the list, then it's not supported.

  • "transition type / JQuery UI effect name"

    ("option" | "value")
  • blind

    (direction | "horizontal", "vertical")
  • clip

    (direction | "horizontal", "vertical")
  • drop

    (direction | "down", "up", "left", "right")
  • fold

    (size | integer... height of fold)
  • pulsate

    (times | integer... times to pulsate)
  • scale
  • shake

    (direction | "up", "down", "left", "right") (distance | integer... distance to shake) (times | integer... number of times to shake)
  • slide

    (direction | "down", "up", "left", "right")

Transition Types That Do Not Require JQuery UI

  • linear
  • swing

Transition Types that require JQuery UI

  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

Releases

Official releasesDateSizeLinksStatus
2.0.0-Beta2008-Sep-1869.25 KBSupported for 1.0.xThis release is supported but is not currently the recommended release for 1.0.x.
0.1.1-beta-12008-Sep-0488.22 KBRecommended for 1.0.xThis is currently the recommended release for 1.0.x.