Swiper

jQuery

Mousewheel Example

Swiper allows the user to navigate through each panel by using the mousewheel. In the example below with your mouse cursor over the Swiper element and move the mousewheel, or other such device like a touchpad.

$('#mousewheel-swiper').swiper({
  type:         'mousewheel'
});
Example 1
Example 2
Example 3
Example 4

Mousemove Example

This example allows the user to navigate through each panel by using the position of the mouse cursor (on the X axis) within the Swiper element.

$('#mousemove-swiper').swiper({
  type:         'mousemove'
});
Example 1
Example 2
Example 3
Example 4

Extra Features

Swiper also builds a pager navigation and can also automatically progress through each panel within your Swiper element with an animated transition.

Pager navigation building is on by default; a value of false assigned to the Swiper setting pagerEnable with not create the pager navigation.

The automatic navigation to the next Swiper panel is off by default; a true value assigned to the Swiper setting autoEnable will enable the auto play function. The auto play pauses when the mouse cursor is within the Swiper element.

Speaking of transitions, there are a varied range of different animation styles to use such as: fade, slide-x, slide-y and grow. You can also affect the transitions by aligning the panels to certain sides within the Swiper's area.

$('#extra-features-swiper').swiper({
  type:             'none',
  transition:       'grow',
  align:            'center middle',
  autoEnable:       1,
  autoPauseOnHover: 0,
  pagerEnable:      0
});
Example 1
Example 2
Example 3
Example 4

Change transition: ms

There are further ways to customise the pager navigation and auto play features to your needs. Please read the Docs for more information.