Revolution Slider

1Content Source

Default Slider Flickr Stream Instagram Stream Twitter Stream Facebook Stream YouTube Stream Vimeo Stream

Slides

Cache (sec)

Source

Instagram User Name

Instagram Hashtag

Slides (max 500)

Cache (sec)

Flickr API Key

Read here how to receive your Flickr API key

Source

Flickr User Url

Select Photoset

Flickr Gallery Url

Flickr Group Url

Slides (max 25)

Cache (sec)

Facebook Page

Source

Select Album

App ID

App Secret

Please register your Website app with Facebook to get the values

Slides (max 500)

Cache (sec)

Twitter Name @

Text Tweets

Retweets

Replies

Consumer Key

Consumer Secret

Access Token

Access Secret

Please register your application with Twitter to get the values

The “YouTube Stream” content source is used to display a full stream of videos from a channel/playlist.
If you want to display a single youtube video, please select the content source “Default Slider” and add a video layer in the slide editor.

Slides (max 50)

Cache (sec)

Youtube API Key

Find information about the YouTube API key here

Channel ID

Source

Select Playlist

See how to find the Youtube channel ID here

The “Vimeo Stream” content source is used to display a full stream of videos from a user/album/group/channel.
If you want to display a single vimeo video, please select the content source “Default Slider” and add a video layer in the slide editor.

Slides (max 60)

Cache (sec)

Source

User

Group

Album ID

Channel

2Slider Title & ShortCode

The title of the slider, example: Slider 1 The alias for embedding your slider, example: slider1 Place the shortcode where you want to show the slider

3Select a Slider Type

Standard Slider

Hero Scene

Carousel Slider

Load a Preset from this Slider Type

Save Current Settings as Preset

4Slide Layout

Auto

Full-Width

Full-Screen

Desktop Large Max

Layer

Layer Grid Size px x px

Specify a layer grid size above Slider is always Linear Responsive till next Defined Grid size has been hit.

Notebook 1024px

Layer

Layer Grid Size px x px Auto Sizes Custom Grid Size
If not defined, the next bigger Layer Grid Size is the basic of Linear Responsive calculations.

Tablet 778px

Layer

Layer Grid Size px x px Auto Sizes Custom Grid Size
If not defined, the next bigger Layer Grid Size is the basic of Linear Responsive calculations.

Mobile 480px

Layer

Layer Grid Size px x px Auto Sizes Custom Grid Size
If not defined, the next bigger Layer Grid Size is the basic of Linear Responsive calculations.

Show Advanced Size Options

Minimal Height of Slider (Optional) Disable Force FullWidth Layers align within the full slider instead of the layer grid. The minimum height of the Slider in FullScreen mode. Disable Force FullWidth Disable the FullWidth Force function, and allow to float the Fullheight slider horizontal. Increase/Decrease Fullscreen Height (Optional) Example: #header or .header, .footer, #somecontainer | Height of Slider will be decreased with the height of these Containers to fit perfect in the screen. Decrease/Increase height of Slider. Can be used with px and %. Positive/Negative values allowed. Example: 40px or 10%

Overflow Hidden

Adds overflow:hidden to the slider wrapping container which will hide / cut any overlapping elements. Mostly used in Carousel Sliders. Respect Aspect Ratio

It will keep aspect ratio and ignore max height of Layer Grid by upscaling. Layer Area will be vertical centered. The minimum height of the Slider in FullWidth or Auto mode. The maximum width of the Slider in Auto mode.

Force Full Width:

5Customize, Build & Implement

Advanced Settings Go for further customization using the advanced settings on the right of this configuration page.

Scroll to Options

Start Building Slides Our drag and drop editor will make creating slide content an absolut breeze. This is where the magic happens!

Edit Slides

Implement your Slider There are several ways to add your slider to your wordpress post / page / etc.

Embed Slider

Save Settings updating... Delete Slider All Sliders Preview

6Custom CSS / Javascript

Custom CSS
Custom JavaScript

General Settings

Slideshow
Defaults
Progress Bar
1st Slide
Misc.

Next Slide on Focus

Disable Blur/Focus behavior

Layers Selectable: Slider ID

Default Slide Duration ms

Initialization Delay ms

Transitions

Animation Duration ms

Image Source Size

Background Fit

Background Position

Background Repeat

Ken Burns / Pan Zoom:

Start Fit: (in %):

Easing:

End Fit: (in %):

Start Offset X:

Start Offset Y:

End Offset X:

End Offset Y:

Start Rotate:

End Rotate:

Blur Start:

Blur End:

Duration (in ms):

Activate Alt. 1st Slide

Alternative 1st Slide

First Transition Active

Transition Type

Transition Duration ms

Transition Slot Amount ms

Stop Slide On Hover

Stop Slider After ...

Amount of Loops

At Slide

Shuffle / Random Mode

Loop Single Slide

Stop Slider Out of ViewPort

Out Of ViewPort:

Area out of ViewPort: % Preset Slider Height

Wait for revapi25.revstart()

Progress Bar Active

Progress Bar Position

Progress Bar Height px

Progress Bar Color

Layout & Visual

Appearance
Spinner
Mobile
Position

Disable Slider on Mobile

Disable KenBurn On Mobile

Hide Element Under Width:

Slider px

Predefined Layers px

All Layers px

Shadow Type

Dotted Overlay Size

Slider Background

Background color

Padding as Border

Show Background Image

Background Image Url Set

Background Fit

Background Repeat

Background Position

Position on the page

Margin Top px

Margin Bottom px

Margin Left px

Margin Right px

Choose Spinner

Spinner Color

Navigation

Arrows
Bullets
Tabs
Thumbs
Touch
Misc.

Enable Arrows

RTL Direction Arrows Style

Preset

Toggle Custom Navigation Styles

Visibility

Always Show

Hide After ms

Hide After on Mobile ms

Hide Under

Width px

Hide Over

Width px

Left Arrow Position

Horizontal Align

Vertical Align

Horizontal Offset px

Vertical Offset px

Aligned by

Right Arrow Position

Horizontal Align

Vertical Align

Horizontal Offset px

Vertical Offset px

Aligned by

Enable Bullets

RTL Direction Bullet Style

Preset

Toggle Custom Navigation Styles

Space px

Direction

Visibility

Always Show

Hide After ms

Hide After on Mobile ms

Hide under Width

Width px

Hide over Width

Width px

Position

Horizontal Align

Vertical Align

Horizontal Offset px

Vertical Offset px

Aligned by

Enable Thumbnails

RTL Direction

Wrapper Container

Wrapper Padding

Span Wrapper Wrapper color

Thumbnails

Thumbnails Style

Preset

Toggle Custom Navigation Styles

Visible Thumbs Amount

Space px

Direction

Thumbnail Container Size

Container Width px

Container Height px

Min Container Width px

Visibility

Always Show

Hide After ms

Hide After on Mobile ms

Hide under Width

Width px

Hide over Width

Width px

Position

Inner / outer

Horizontal Align

Vertical Align

Horizontal Offset px

Vertical Offset px

Aligned by

Enable Tabs

RTL Direction

Wrapper Container

Wrapper Padding

Span Wrapper Wrapper Color

Tabs

Tabs Style

Preset

Toggle Custom Navigation Styles

Visible Tabs Amount

Space px

Direction

Tab Sizes

Tabs Width px

Tabs Height px

Min. Tab Width px

Visibility

Always Show

Hide After ms

Hide After on Mobile ms

Hide under Width

Width px

Hide over Width

Width px

Position

Inner / outer

Horizontal Align

Vertical Align

Horizontal Offset px

Vertical Offset px

Aligned by

Touch Enabled

Touch Enabled on Desktop

Drag Block Vertical

Swipe Treshhold (0 - 200)

Swipe Min Finger

Swipe Direction

Keyboard Navigation

Key Direction

Mouse Scroll Navigation Reverse Mouse Scroll

Preview Image Size

Preview Image Width px

Preview Image Height px

Carousel Settings

Basics
Transformations
Aligns

Infinity Scroll

Space between slides px

Border Radius

Padding Top px Padding Bottom px Max. Visible Items Stretch Element

Show All Layers 1 Time

Easing

Easing Speed ms

Fade All Elements

Varying Fade

Rotation

Varying Rotation

Max. Rotation deg

Scale

Varying Scale

Max. Scaledown %

Horizontal Aligns

Vertical Aligns

Parallax & 3D

Enable Parallax / 3D

Disable on Mobile

3D Settings

3D Shadow

3D Background Disabled

Slider Overflow Hidden

Layers Overflow Hidden

3D Crop Fix (z) px

Mouse Sensibility

Event

Parallax Origo

Mouse based Speed ms

Background Speed ms

Layers Speed ms

Parallax Levels

3D Depth Levels

Default 3D Depth Level Depth 1Depth 1

Level Depth 2Depth 2

Level Depth 3Depth 3

Level Depth 4Depth 4

Level Depth 5Depth 5

Level Depth 6Depth 6

Level Depth 7Depth 7

Level Depth 8Depth 8

Level Depth 9Depth 9

Level Depth 10Depth 10

Level Depth 11Depth 11

Level Depth 12Depth 12

Level Depth 13Depth 13

Level Depth 14Depth 14

Level Depth 15Depth 15

Scroll Effects

Fade Effect

Blur Effect

Grayscale Effect

Effect Levels:

Max. Blur Effect px

Effects on Elements:

On Slider BG's

None Parallax Layers

Parallax Layers

None Parallax Static L.

Parallax Static Layers

Scroll Dependencies:

Effect Directions

Offset Effect %

Effect Factor BG

Effect Factor Layers

Disable on Mobile

Performance and SEO Optimization

Lazy Load

Overall Slider Performance Slow Ok Fast Load Speed UMTS: 00:04 Load Speed DSL: 00:00 Load Speed T1: 00:00 Load Speed UMTS: 00:04 Load Speed DSL: 00:00 Load Speed T1: 00:00 Load Speed UMTS: 00:04 Load Speed DSL: 00:00 Load Speed T1: 00:00 Total Slider Size: 229.44 kB Show Full Statistics Preloaded Slides Size: 229.44 kB 229.44 kB 229.44 kB Show All Issues

Need Some Attention

Image Performance Slow Ok Fast Images Loaded: Show Details

extern...7-26-at-14.28.52.png

CSS Performance Slow Ok Fast CSS Loaded: 29.37 kB Show Details

29 kBcss/settings.css

29.37 kB

jQuery Performance Slow Ok Fast jQuery Loaded: 200.07 kB Show Details

108 kBjquery.themepunch.tools.min.js
63 kBjquery.themepunch.revolution.min.js
29 kBrevolution.extension.slideanims.min.js

200.07 kB

Google Fonts Performance Slow Ok Fast Fonts Loaded: 0 Show Details

Problem Handlings

Fallbacks
Troubleshooting

Simplify on IOS4/IE8

Use Alternative Image

HTML5 Autoplay on Mobiles

Alternate Image

Set

Ignore Height Changes

Ignore Height Changes Under px

JQuery No Conflict Mode

Debug Mode

Follow FAQ for Troubleshooting

Google Fonts

No dynamic fonts registered

Import / Export / Replace

Import
Export
Replace URL

Custom Animations overwrite append

Note! Style templates will be updated if they exist. Importing slider, will delete all the current slider settings and slides and replacing it with the imported content.

Export Slider

Export with Dummy Images

Replace From

Replace To

Replace URL's

Replacing...

Note! The replace process is not reversible !

API Functions

Methods
Events

Start Slider:

Pause Slider:

Resume Slider:

Previous Slide:

Next Slide:

Go To Slide:

Go To Slide with ID:

Max Slides:

Current Slide:

Last Slide:

External Scroll:

Redraw Slider:

Remove Slide:

Kill Slider:

Slider Loaded

revapi25.bind("revolution.slide.onloaded",function (e) {
	console.log("slider loaded");
});

Slider swapped to an other slide

revapi25.bind("revolution.slide.onchange",function (e,data) {
	console.log("slide changed to: "+data.slideIndex);
	console.log("current slide <li> Index: "+data.slideLIIndex);
	//data.currentslide - Current  Slide as jQuery Object
	//data.prevslide - Previous Slide as jQuery Object});

Slider paused

revapi25.bind("revolution.slide.onpause",function (e,data) {
	console.log("timer paused");
});

Slider is Playing after pause

revapi25.bind("revolution.slide.onresume",function (e,data) {
	console.log("timer resume");
});

Video is playing in slider

revapi25.bind("revolution.slide.onvideoplay",function (e,data) {
	console.log("video play");
	//data.video - The Video API to Manage Video functions
	//data.videotype - youtube, vimeo, html5
	//data.settings - Video Settings});

Video stopped in slider

revapi25.bind("revolution.slide.onvideostop",function (e,data) {
	console.log("video stop");
	//data.video - The Video API to Manage Video functions
	//data.videotype - youtube, vimeo, html5
	//data.settings - Video Settings});

Slider reached the 'stop at' slide

revapi25.bind("revolution.slide.onstop",function (e,data) {
	console.log("slider stopped");
});

Prepared for slide change

revapi25.bind("revolution.slide.onbeforeswap",function (e) {
	console.log("Slider Before Swap");
	//data.currentslide - Current Slide as jQuery Object
	//data.nextslide - Coming Slide as jQuery Object});

Finnished with slide change

revapi25.bind("revolution.slide.onafterswap",function (e) {
	console.log("Slider After Swap");
	//data.currentslide - Current Slide as jQuery Object
	//data.previousslide - Previous Slide as jQuery Object});

Last slide starts

revapi25.bind("revolution.slide.slideatend",function (e) {
	console.log("slide at end");
});

Layer Events

revapi25.bind("revolution.slide.layeraction",function (e) {
	//data.eventtype - Layer Action (enterstage, enteredstage, leavestage,leftstage)
	//data.layertype - Layer Type (image,video,html)
	//data.layersettings - Default Settings for Layer
	//data.layer - Layer as jQuery Object
});

*Only Illustration, most changes are not visible.

If you purchased a theme that bundled Slider Revolution

Activate Slider Revolution for to ...

Click on the following to learn how to fix issues

Cache Plugins Installed on your Server

Terms of Using SVG Objects from the Object Library

Terms of Using ICON Objects from the Object Library

Further License Informations

Terms of Using PNG Objects from the Object Library

Terms of Using JPG Objects from the Object Library

1Content Source

2Slider Title & ShortCode

3Select a Slider Type

4Slide Layout

5Customize, Build & Implement

6Custom CSS / Javascript

General Settings

Layout & Visual

Hide Element Under Width:

Slider Background

Navigation

Visibility

Left Arrow Position

Right Arrow Position

Visibility

Position

Wrapper Container

Thumbnails

Thumbnail Container Size

Visibility

Position

Wrapper Container

Tabs

Tab Sizes

Visibility

Position

Preview Image Size

Carousel Settings

Parallax & 3D

3D Settings

Mouse Sensibility

Parallax Levels

3D Depth Levels

Scroll Effects

Effect Levels:

Effects on Elements:

Scroll Dependencies:

Performance and SEO Optimization

Problem Handlings

Google Fonts

No dynamic fonts registered

Import / Export / Replace

API Functions

Slider Loaded

Slider swapped to an other slide

Slider paused

Slider is Playing after pause

Video is playing in slider

Video stopped in slider

Slider reached the 'stop at' slide

Prepared for slide change

Finnished with slide change

Last slide starts

Layer Events