Here is a small update to Karmic flow

- Fix auto slide timing not resetting when clicking on controllers
- Fix decesdants of controllers triggering the default behavior of controllers (i.e. popping up new windows)
- Now karmic_flow_slide_selected will trigger the correct slide and controller onDOMready
- Slides now uses id instead of name for standards compliance

This is a remake of my wildly popular plugin for jQuery, known as jFlow. It works with Karmagination 0.2 or jQuery 1.3.2.

Download or see a demo with Karmagination or see a demo with jQuery

Basic usage

$('#container').karmicFlow();

Here are the configurable options:

duration: (int) the time in milliseconds it takes to move 1 slide
timer: (int) waiting time in milliseconds for each slide before it slides, used when slides are played
auto: (boolean) specify whether to automatically play the slides on load

The options below are not to be modified unless you know what you are doing. If you change the options below make sure you change the corresponding class name for the HTML.

container: (string) the class name for container of slider and slides
slider: (string) the class name for slider
slides: (string) the class name for slides
slide_selected: (string) the class name added to currect active slide
slide_overflow: (string) the class name that handles how to display overflow slide
controller: (string) the class name for controller that slides to a particular slides
controller_selected: (string) the class name added to the controller of the current active slide
next: (string) the class name that slides the slider to the next slide
prev: (string) the class name that slides the slider to the previous slide
play: (string) the class name that automatically slides slide in timed intervals
pause: (string) the class name that pauses the effects of play

The default values for the options:

duration: 300
timer: 2500
auto: false
container: ‘karmic_flow_container’
slider: ‘karmic_flow_slider’
slides: ‘karmic_flow_slides’
sliding: ‘karmic_flow_sliding’
slide_selected: ‘karmic_flow_slide_selected’
slide_overflow: ‘karmic_flow_slide_overflow’
controller: ‘karmic_flow_controller’
controller_selected: ‘karmic_flow_controller_selected’
next: ‘karmic_flow_next_controller’
prev: ‘karmic_flow_prev_controller’
play: ‘karmic_flow_play_controller’
pause: ‘karmic_flow_pause_controller’

Recommended HTML structure:

<a class="karmic_flow_prev_controller" href="#" target="container">Prev</a>
<a class="karmic_flow_next_controller" href="#" target="container">Next</a>
<a class="karmic_flow_play_controller" href="#" target="container">Play/Pause</a>
<br />
<br />
<br />
<a class="karmic_flow_controller" href="#slide1" target="container"><b>叶上水</b></a>
<a class="karmic_flow_controller" href="#slide2" target="container">沙与石</a>
<a class="karmic_flow_controller" href="#slide3" target="container">迷雾滩</a>
<a class="karmic_flow_controller" href="#slide4" target="container">豹爽</a>
 
<div id="container" class="karmic_flow_container">
    <ul class="karmic_flow_slider">
        <li class="karmic_flow_slides karmic_flow_slide_selected" id="slide1"><img src="i/p1.jpg" /></li>
        <li class="karmic_flow_slides" id="slide2"><img src="i/p2.jpg" /></li>
        <li class="karmic_flow_slides" id="slide3"><img src="i/p3.jpg" /></li>
        <li class="karmic_flow_slides" id="slide4"><img src="i/p4.jpg" /></li>
    </div>
</div>