Agile Carousel - JQuery Plugin
View Examples!
Featured Example: http://www.agilecarousel.com/examples/multi_example/carousel.html
All the Bells and Whistles: http://www.agilecarousel.com/examples/full_example/carousel.html
JQuery UI example: http://www.agilecarousel.com/examples/jqueryui_example/carousel.html
simple example: http://www.agilecarousel.com/examples/simple_example/carousel.html
Download
http://code.google.com/p/agile-carousel/downloads/list
Currently in beta version. 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!
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.
<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
"line through", like this means not supported.
"transition type / JQuery UI effect name"("option" | "value")
blind(direction | "horizontal", "vertical")clip(direction | "horizontal", "vertical")drop(direction | "down", "up", "left", "right")explode(number | integer... the number of pieces)fold(size | integer... height of fold)pulsate(times | integer... times to pulsate)puff(percent | integer... percentage of size to scale to)scale(from | default = { height: .., width: .. }, ...state at beginning, usually not needed.), (direction | 'both', 'vertical', 'horizontal'... dimensions that will be scales), (origin | default = 'middle','center'... the vanishing point, default for show/hide), (percent | integer ...the percentage to scale to, number)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 do 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
