Skip to content

Minimal, non-graphical (controller-only) content slider for jQuery

License

Notifications You must be signed in to change notification settings

loilo-archive/multisteps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

multisteps

Minimal content "slider" for jQuery. Uses CSS3 animations only, falls back to pure CSS display.

Usage

Easy.

  1. Include multisteps.js and multisteps.css in your page.

  2. Create a DOM structure like this:

    <div id="slider">
        <div class="step">First step</div>
        <div class="step">Second step</div>
        <div class="step">Third step</div>
    </div>
  3. Initialize:

    $( '#slider' ).multisteps( options );

Options

You may provide the following options. (Changing them afterwards is not possible at the moment.)

start

The index or id of the starting step.

Default: 0

loop

Calling "next" on the last step returns to the first one.

Default: false

orientation

Changing this to "horizontal" won't restrict the container's height.

Default: vertical

animateIn

The name of the CSS3 class for a showing up step. The default is provided in the multisteps.css.

Default: fadeInUp

animateOut

The name of the CSS3 class for a closing step. The default is provided in the multisteps.css.

Default: fadeOutUp

onChange

A callback function triggered at the moment the command for a step change comes in.

Default: function () {}

onAfterChange

A callback function triggered at the moment a step change completes.

Default: function () {}

Methods

Use the following methods like this:

$( '#slider' ).multisteps( methodName, arguments... );

current()

Returns a jQuery collection containing the currently active step.

currentIndex()

Returns the index of the currently active step.

hasPrev()

If there is a previous step. Returns false if the first step is active, even if loop: true.

hasNext()

If there is a next step. Returns false if the last step is active, even if loop: true.

prev()

Shows the previous step.

next()

Shows the next step.

first()

Shows the first step.

last()

Shows the last step.

goto( to )

Shows the step with the index / id to.

refresh()

Recalculates the height of the container. Automatically called after step change. orientation: vertical only.

About

Minimal, non-graphical (controller-only) content slider for jQuery

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published