Swiper

jQuery

About ↑ Back to top

Sticky helps to keep handy elements on the page while scrolling. Handy for persistent navigation and advertising.

Features ↑ Back to top

  • Interactive types: use the mouse wheel and/or the cursor position within Swiper element
  • Variety of transition types: Fade, Slide (X and Y axis), Grow, Shrink
  • Auto play
  • Customisable item navigation
  • Compatible in Firefox, Safari, Chrome and IE6+

Known Issues ↑ Back to top

  • No known issues

Release Log ↑ Back to top

v0.1

  • First release of the Swiper plugin

API Settings ↑ Back to top

Default Values

type:                'mousewheel mousemove',
align:               'center middle',
wrap:                0,
transition:          'fade',
transitionTime:      300,
startOnItemIndex:    0,
autoEnable:          0,
autoWrap:            1,
autoTime:            8000,
autoPauseOnHover:    1,
pagerEnable:         1,
pagerItemContent:    '•',
pagerHide:           1,
pagerHideDelay:      1500

type: none | ( mousewheel &| mousemove )

The type of interactive operation(s) allowed.
Default: mousewheel mousemove

  • none
    If the pager is enabled, user can navigate between panels using that, otherwise they can't navigate through panels at all.
     
  • mousewheel
    Uses the mousewheel delta to navigation between panels.
     
  • mousemove
    Uses the X position of the mouse cursor within the element to navigate between panels.

align: ( left | center | right ) & ( top | middle | bottom )

How to align the panels within the Swiper element.
Default: center middle

wrap: boolean

Allow to wrap to the first item when going next from the last (and vice versa).
Default: 0

transition: none | fade | slide-x | slide-y | grow

The style of animation for the panel transition.
Default: fade

transitionTime: integer

The time in miliseconds it takes for the transition to animate.
Default: 300

startOnItemIndex: integer

The index of the first item you want visible when the Swiper initialises.
Default: 0

autoEnable: boolean

Enable the auto-swipe functionality.
Default: 0

autoTime: integer

The time in miliseconds to display each panel before moving on to the next.
Default: 8000

autoWrap: boolean

Allow wrapping panel sequence if user reaches start/end. Works the same as wrap but only applies when stepping through each panel through the auto-swipe functionality.
Default: 1

pagerEnable: boolean

Build the pager element and enable its functionality.
Default: 1

pagerItemContent: alpha-lower | alpha-upper | number | roman-lower | roman-upper | string

The content to use within the pager item.

  • alpha-lower a, b, c, d, ...
  • alpha-upper A, B, C, D, ...
  • roman-lower i, ii, iii, iv, ...
  • roman-upper I, II, III, IV, ...
  • string Enter in your own HTML for the pager item content.
Default: •

pagerHide: boolean

Hide the pager when the user moves the mouse cursor outside the Swiper element.
Default: 1

pagerHideDelay: integer

Amount of time to wait before hiding the pager.
Default: 1500

oninit: function( element )

Function to trigger when Swiper has been applied to the element.
Default: function(){}

onshow: function( element )

Function to trigger when Swiper shows a panel.
Default: function(){}

onautoplay: function( element )

Function to trigger when the auto function of the Swiper has been started.
Default: function(){}

onautostop: function( element )

Function to trigger when the auto function of the Swiper has been stopped.
Default: function(){}

API Events ↑ Back to top

swiper_show [ panelIndex:integer ]

Transition to a specific panel element specified by the index within the Swiper's panels (see API Data).

Usage

$(element).trigger('swiper_show', [ 5 ]);

swiper_next [ allowWrap:boolean ]

Transition to the next panel element. Supports an override to wrap to the first panel if user is at the last panel.

Usage

$(element).trigger('swiper_next', [ 1 ]);

swiper_prev [ allowWrap:boolean ]

Transition to the previous panel element. Supports an override to wrap to the last panel if user is at the first panel.

Usage

$(element).trigger('swiper_prev', [ 1 ]);

swiper_pager_show

Show the pager navigation element (if one exists).

Usage

$(element).trigger('swiper_pager_show');

swiper_pager_hide

Hide the pager navigation element (if one exists).

Usage

$(element).trigger('swiper_pager_hide');

swiper_pager_hidedelay

Hide the pager navigation element (if one exists) after the delay time.

Usage

$(element).trigger('swiper_pager_hidedelay');

swiper_auto_play

Start the auto-swipe function.

Usage

$(element).trigger('swiper_auto_play');

swiper_auto_stop

Stop the auto-swipe function.

Usage

$(element).trigger('swiper_auto_stop');

API Data ↑ Back to top

Specific data about the Swiper element is attached to it using the jQuery.data() or jQuery.fn.data() methods. This data can be both set and retrieved. The purpose of using $.data is so after initialising you can still configure the plugin's functionality.

To view all the data attached to an element, use console.log( $.data(element) );

element.swiperPanels: array

An array of the Swiper's panel elements.

$.data(element, 'swiperPanels');

element.swiperPager: element

The Swiper's pager element.

$.data(element, 'swiperPager');

element.swiperTransition: none | fade | slide-x | slide-y | grow

Set the panel transition animation style.

$.data(element, 'swiperTransition', 'fade');

element.swiperTransitionTime: integer

Set the panel transition animation duration in miliseconds.

$.data(element, 'swiperTransitionTime', 600);

element.swiperWrap: boolean

Enable/disable the wrap option.

$.data(element, 'swiperWrap', 1);

element.swiperAutoEnable: boolean

Enable/disable the Swiper's auto-swipe functionality.

$.data(element, 'swiperAutoEnable', 1);

element.swiperAutoTime: integer

The amount of time the auto-swipe function waits before transitioning to the next element.

$.data(element, 'swiperAutoTime', 6000);

element.swiperAutoWrap: boolean

Enable/disable the autoWrap option.

$.data(element, 'swiperAutoWrap', 0);

element.swiperPauseOnHover: boolean

Enable/disable the autoPauseOnHover option.

$.data(element, 'swiperAutoPauseOnHover', 0);