Manual

The fundamentals of using Slider Revolution.

Configuring Module Navigation with Touch, Keyboard & Mouse

Learn how to setup touch swiping, arrow key controls and mouse wheel scrolling.

Touch Navigation

Options for enabling and configuring touch navigation, i.e. swiping between slides, can all be found under the Navigation Options tab, Touch sub-section, in the Touch panel:

Mobile Swipe Enabled

Toggle Mobile Swipe Enabled to ON to allow swiping via touch on mobile devices:

Desktop Swipe Enabled

Toggle Desktop Swipe Enabled to ON to allow swiping via mouse or touch on desktop devices:

Note: With this option enabled, swiping will probably also work on mobile devices if the device/browser can interpret touch interactions as mouse interactions. Nonetheless, if you know you want to support swiping on mobile devices it’s best to also use the Mobile Swipe Enabled option. 

Block Scroll

If you are using a vertical swiping direction on your module, you can set Block Scroll to ON to ensure the visitor doesn’t accidentally scroll the page up and down when they mean to swipe to the next slide:

Velocity

The Velocity option allows to you set, in pixels(px), the distance a swiping movement must cover before a slide change will be triggered:

Min. Finger

The Min. Finger options allows you to set how many fingers must be used to swipe in order to trigger a slide change:

The default value is 1, for a single finger swipe. You could, for example, change it to 2 and require a two finger swipe instead.

Swipe Dir

The Swipe Direction option determines the direction swiping needs to move to trigger a slide transition:

By default it’s set to use a horizontal swipe but it can be switched to use a vertical swipe instead.

Note: For best results, use a slide animation that moves in the same direction as swiping. If using horizontal swiping choose a slide animation that moves sideways, but if using vertical swiping use a slide animation that moves up and down.

Keyboard Navigation

Options for enabling and configuring keyboard navigation, i.e. using arrow keys to switch between slides, can all be found under the Navigation Options tab, Keyboard sub-section, in the Keyboard Arrow Navigation panel:

Enabled

Set the Enabled option to ON and the visitor will be able to switch between slides using their keyboard’s arrow keys:

Direction

The Direction option determines which arrow keys will be used to switch between slides. Choose between Left/Right Arrow Keys and Up/Down Arrow Keys:

Note: As with swiping, for best results set your slide animation to move in the same direction as your arrow keys, i.e use a horizontal animation with left and right arrow keys, and a vertical animation with up and down arrow keys.

Mouse Navigation

Options for enabling and configuring mouse navigation, i.e. using mouse wheel scrolling to switch between slides, can all be found under the Navigation Options tab, Mouse sub-section, in the Mouse Wheel Navigation panel:

Wheel Listener

Use the wheel listener option to determine whether scrolling the mouse wheel should switch between slides. There are three possible settings:

Select the Off setting to disable mouse wheel navigation.

Select the Infinity setting and the module will keep transitioning slides as long as the mouse wheel is scrolling.

Select the On setting and the module will progress until it reaches the last slide, after which mouse wheel scrolling will scroll down the page instead.

Reverse Scroll

By default, with mouse wheel navigation, scrolling down proceeds to the next slide, while scrolling up returns to the previous slide.

If you’d prefer to reverse this, that is, have scrolling down return to the previous slide and scrolling up proceeding to the next slide, then set the Reverse Scroll option to Reverse:

Scroll Target

The Scroll Target option is available as a troubleshooting tool, should you find there are issues with normal page scrolling while you are using mouse wheel navigation:

If this should occur, try switching between the three available settings: Window, HTML and Body.

In ViewPort(%)

The In ViewPort(%) option sets the percentage of the module that needs to be visible before scrolling the mouse over it will stop it from scrolling and start switching between slides:

For example, if the option is set to 50%, as long as less than half of the module is visible, mouse wheel scrolling over it will scroll the page. But once more than half the module is visible, mouse wheel scrolling will trigger slide switching instead.

If the option was instead set to 100% the entire module would need to be visible before slide switching could be triggered, while if it was set to 0% slide switching could be triggered no matter what portion of the module was visible.

Snap Threshold 

The Snap Threshold option determines how far the module should be scrolled before it snaps to the top of the page:

The option is set in pixels(px), and is relative to the In ViewPort(%) option.

For example, if Snap Threshold is set to 200 and In ViewPort(%) is set to 50%, snapping will occur if the module is scrolled to a point within 200px of the module becoming 50% visible.

Call Delay

Use the Call Delay option to set a period of time in milliseconds(ms) between switching from one slide to the next:

This ensures rapid mouse scrolling doesn’t proceed too quickly through slides.

Configuring Module Navigation with Touch, Keyboard & Mouse

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.