Slides

Slide Basics

Markup

Each slide in Revolution Slider is defined via an unsorted list element.

<li>

The Following example shows a very simple img based slide markup. Settings and parameters are later discussed!

<li data-index="rs-353" 
    data-transition="fade" 
    data-slotamount="default"  
    data-easein="default" 
    data-easeout="default" 
    data-masterspeed="default"  
    data-link="slide" 
    data-delay="700"  
    data-rotate="0" 
    data-title="Slide" 
    data-param1="test" 
    data-description="Some Description">

    <!-- MAIN IMAGE -->
    <img src="slidebg.jpg"  
         alt=""  
         width="1732" height="800" 
         data-bgposition="center center" 
         data-bgfit="cover" 
         data-bgrepeat="no-repeat" 
         class="rev-slidebg" data-no-retina>

</li>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<li data-index="rs-353"

data-transition="fade"

data-slotamount="default"

data-easein="default"

data-easeout="default"

data-masterspeed="default"

data-link="slide"

data-delay="700"

data-rotate="0"

data-title="Slide"

data-param1="test"

data-description="Some Description">

<img src="slidebg.jpg"

alt=""

width="1732" height="800"

data-bgposition="center center"

data-bgfit="cover"

data-bgrepeat="no-repeat"

class="rev-slidebg" data-no-retina>

</li>

!IMPORTANT!
You will always need to define an img element within a slide. In the Examples below you will see how to create Image, Video and Solid color based slides, however the most important rule you should follow, even if you dont want to show any image in a slide, you will need to add an img tag to every single slides.

Settings Overview

data-index Type:String
Value:Unique Index ID

This index can be manually defined. If not defined, the Slider will create one Index on the run. Used for Slide Internal links and actions as reference value. (Carousel, Navigation, Internal Slide Links relating on these value also)

data-transition Type:String
Value:Slide Transition

One or more Transitions from the list below. A different Transition will be picked from the predefined Transitions per Loop if more than one Transition are defined here. See Transition Table.

data-slotamount Type:Integer
Value:Number of Slots

The number of slots or slices the Slide image is “split” to. Only available for Transitions with Slots and Slices.

data-easein / data-easeout Type:String
Value:Animation Easing

The In/out animation Easing. If you dont know how you wish to ease the animation, simple dont define it, or use the value “default” which will pick the best ease per transition type. See Ease Table.

data-masterspeed Type:String
Value:Duration in ms or Default

This option defines the duration of the Transition in ms (milliseconds). The value “default” is also accepted which will pick the best Duration for the selected Transition.

data-rotate Type:integer
Value:Degree

The rotation of the Single Slots/Slices, or full image during the Transition. Some transition will ignore this value. Negative and Positive values are allowed. (i.e. -360, or 180 etc..)

data-fstransition Type:String
Value:Slide Transition

The very first transition for the first slide, to have a different transition i.e. after slide loading than in the slide loop. After the first loop the data-transition defined animation will be used. See Transition Table.

data-fsmasterspeed Type:String
Value:Duration in ms or Default

This option defines the duration of the First Transition in ms (milliseconds). The value “default” is also accepted which will pick the best Duration for the selected Transition. Only allowed if data-fstransition is set.

data-fsslotamount Type:Integer
Value:Number of Slots

The number of slots or slices the Slide image is “split” to in the first transition. Only available for Transitions with Slots and Slices, and only available if data-fstransition is set !

data-thumb Type:String
Value:Image URL

The URL for the Thumb / Tab / Bullet / Arrow “preview” Image which will be individual per slide if it is defined. If you dont define it manually, and the navigation need to pick some Thumb image for Preview, it will simple copy the original Background Image from the Slide !

data-title Type:String
Value:Text

The title of the slide. This can be also referenced via Navigation markups to show Slide title via Thumbnails, Bullets, Arrows, Tabs.

data-description Type:String
Value:Text

Some description about the Slide. This can be also referenced via Navigation markups to show Slide Description via Thumbnails, Bullets, Arrows, Tabs.

data-param(1-10) Type:String
Value:Text

Some further information, description about the Slide. This can be referenced via Navigation markups to show Slide Description via Thumbnails, Bullets, Arrows, Tabs. See Navigation Markups later for better understanding.

data-link Type:String
Value:URL or "slide"

This will allow to link the full Slider to an URL, to a Slide (next,previous, slide index) or let the page scroll under the slider.

To link to an url, set simple an existing URL like http://www.themepunch.com and set via the data-target the Target.

To link to anything else, please set this value to “slide” and the data-linktoslide attribute i.e. to “scroll_under”, “slide2”, “next”, “prev”.

See further data attributes below.

data-target Type:String
Value:"_blank", "_self", "_top"

You can define the Link target in case data-link is set on the Full Slide. Default will load the content in the same window (“_self”)

data-linktoslide Type:String
Value:"slide2", "next", "prev", "scroll_under"

You can trigger the previous slide “prev” or the next slide “next” or a predefined slide “slide4” or simple scroll the page under the slider with “scroll_under” option.

Please note, any of these option will only work if the data-link is set to “slide” !

Main Background

Quick Note
A slide’s main background image (or video cover/poster) is what will animate when the slide first comes into view.

Image Slide

A Regular Image as Main Background Image will be defined via an img tag within the slide as our following examples shows:

<img
 src="someimage.jpg"  alt=""  width="1920" height="1080" 
data-bgposition="center center" data-bgfit="cover" 
data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>

1	<img src="someimage.jpg" alt="" width="1920" height="1080" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>

Further Parameters, just like Ken Burns and Parallax attributes are discussed later below.

The Image tag will be converted to a div container with background image for better handling. To enjoy the SEO Benefits we let main bg images always define via the img tag.

src Type:String
Value:URL

Defines the URL of the Image. In case Image should be lazy loaded, we advise to load a simple 10×10 transparent dummy png image as main source and use the data-lazyload parameter for the original Image source.

data-lazyload Type:String
Value:URL

The original image source if Lazy Loading is enabled.

alt Type:String
Value:Text

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

width Type:Integer
Value:px

Specifies the width of an image in pixels. Only used for SEO. Slider will respect the real Image dimensions, and will keep aspect ratio to fit slide container based of further settings.

height Type:Integer
Value:px

Specifies the height of an image in pixels. Only used for SEO. Slider will respect the real Image dimensions, and will keep aspect ratio to fit slide container based of further settings.

data-bgposition Type:String
Value:"left top", "center center", "right bottom",...

Specifies the Image Align within the slide. It works exactly how the Background Image Position works. The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%.

First value can be: left,center,right, % value
Second value can be: top,center,bottom, % value

Both Value must be defined with a space between the two values, like: “top center”

data-bgfit Type:String
Value:"auto","length","cover","contain"

The background-size property specifies the size of the background images.

“length”: Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”

“cover”: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

“contain”: Scale the image to the largest size such that both its width and its height can fit inside the content area

data-bgrepeat Type:String
Value:"repeat", "no-repeat", "repeat-x","repeat-y"

The background-repeat property sets if/how a background image will be repeated.

The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.

“repeat”: The background image will be repeated both vertically and horizontally. This is default

“repeat-x”: The background image will be repeated only horizontally

“repeat-y”: The background image will be repeated only vertically

“no-repeat”: The background-image will not be repeated

Video Slide

To create a fullscreen / fullwidth video slider, please use first a simple Main image as Cover Image and a Video Layer with the special class rs-background-video-laye

<div
 class="rs-background-video-layer" 
 data-forcerewind="on" 
 data-volume="mute" 
 data-ytid="T8--OggjJKQ" 
 data-videoattributes="version=3&enablejsapi=1&html5=1& 
hd=1&wmode=opaque&showinfo=0& 
ref=0;;origin=http://server.local;" 
 data-videorate="1.5" 
 data-videowidth="100%" 
 data-videoheight="100%" 
 data-videocontrols="none" 
 data-videostartat="00:10" 
 data-videoendat="00:50" 
 data-videoloop="loopandnoslidestop" 
 data-forceCover="1" 
 data-aspectratio="16:9" 
 data-autoplay="true" 
 data-autoplayonlyfirsttime="false" 
 data-nextslideatend="true" 
></div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div class="rs-background-video-layer"

data-forcerewind="on"

data-volume="mute"

data-ytid="T8--OggjJKQ"

data-videoattributes="version=3&enablejsapi=1&html5=1& hd=1&wmode=opaque&showinfo=0& ref=0;;origin=http://server.local;"

data-videorate="1.5"

data-videowidth="100%"

data-videoheight="100%"

data-videocontrols="none"

data-videostartat="00:10"

data-videoendat="00:50"

data-videoloop="loopandnoslidestop"

data-forceCover="1"

data-aspectratio="16:9"

data-autoplay="true"

data-autoplayonlyfirsttime="false"

data-nextslideatend="true"

></div>

All Settings of the Video are similar to any Video layer which is discussed within the Layers Section under Media Layers. However here again the most important data attributes for the Video Layers:

data-forcerewind Type:String
Value:"on","off"

It rewinds the video to the start position (which is set via the data-videostartat parameter.

data-volume Type:String
Value:0-100, "mute"

Sets the Start Volume of the Video. It is advised to set Main Background Video volumes to “mute”. 100 is the max. Volume.

data-videorate Type:Float
Value:"0.1".."0.5".."1".."1.5"...

The Speed of the Video. Only available for YouTube Videos. 1 is Normal Speed, 2 half slow, 0.5 is double quick, etc..

data-videowidth/data-videoheight Type:Size (px,%)
Value:"100%"

The Video Width and Height. For FullScreen Cover mode please set the Background videos always to 100% width and height.

data-videocontrols Type:String
Value:"none","controls"

Enable / Disable the control panel of the Video. Will be ignored bei Vimeo, where Controls can not be disabled. We advise to set this to “none” when you use videos as Main Background videos.

data-videostartat Type:Time
Value:"00:00"

At which sec. the video should start. (Also force rewind will rewind the video back to this position). 00:05 means start at the 5th sec. An exact position is not always possible. The next best frame will be picked around the defined time position.

data-videoendat Type:Time
Value:"00:00"

At which sec. the video should stop. All defined events will be triggered once the video reached this position (like next slide on end, loop, rewind, etc..) 00:05 means end at the 5th sec. An exact position is not always possible. The next best frame will be picked around the defined time position. Dont define this value in case you dont want a different end than the real length of the video.

data-videoloop Type:String
Value:"loop","loopandnoslidestop",""

Defines if the Video should loop once the end has been reached (end can be defined also via data-videoendat).

If not defined, the video will play only once, and the timer of slider will cont to count down again, and/or further events will be triggered

If value is “loop” the video will loop and stop also the Slider Timer. Slide will stay in position, and will only go to next slide on user action.

if value set to “loopandnoslidestop” the video will loop during the slide timer continues to count down. If the video is shorter, (i.e. data-videostartat and video-endat defined a shorter range) the video will loop till the end of the slide has been reached.

data-forceCover Type:Integer
Value:"1"

If value is set (to “1”) the video will always cover the slider dimensions. Means it will be zoomed to have a spaceless video covering the full slider aligned to the center center position.

data-aspectratio Type:String
Value:"4:3","16:9"

The aspect ratio of the Video. It helps to pre size the video before the Meta has been read.

data-autoplay Type:Boolean
Value:"true","false"

Starts the video as soon the Video Layer animated in to the Slide.

data-autoplayonlyfirsttime Type:Boolean
Value:"true","false"

Starts the video as soon the Video Layer animated in to the Slide but only the first time. In 2nd loop it sets the data-autoplay to “false”. After 1 loop the Customer can manually start the video if needed.

data-nextslideatend Type:Boolean
Value:"true","false"

Auto call next slide when video reached the End time or in data-videoendat parameter defined time position. It will ignore Slide Countdown process, and only works if Loop not set to Video.

data-ytid Type:String
Value:"T8--OggjJKQ"

Defines the YouTube Video ID. Please define only one of the following possibilities per Video:

data-ytid OR
data-vimeoid OR
data-videomp4

data-vimeoid Type:String
Value:"30300114"

Defines the Vimeo Video ID. Please define only one of the following possibilities per Video:

data-ytid OR
data-vimeoid OR
data-videomp4

data-videomp4 / data-videowebm / data-videoogv Type:Url
Value:HTML 5 Video URL

Defines the HTML5 Video Source file. Can be defined videomp4, videowebm and videogv in the same time to fall back on different browsers if needed. Please define only one of the following possibilities per Video:

data-ytid OR
data-vimeoid OR
data-videomp4 andor data-videowebm andor data-videoogv

data-videoattributes Type:String
Value:Video Attributes

Define for Vimeo or YouTube Videos further Arguments.

i.e: YouTube Video Arguments:
data-videoattributes=”version=3&enablejsapi=1&html5=1& hd=1&wmode=opaque& showinfo=0&ref=0;;origin=http://server.local;”

Vimeo Video Arguments:

data-videoattributes=”title=0&byline=0&portrait=0&api=1″

Solid Color Background

To solid color a Slide, simple use the main image tag and set the image source to a transparent png image as in our examples with Solid color Backgrounds and set the img tag’s background to the color you wish to have as shown here:

<img src="images/dummy.png" style='background-color:#E7E7E7' alt="">

1	<img src="images/dummy.png" style='background-color:#E7E7E7' alt="">

Transparent Background

Use the Main background image tag and use the prepared transparent.png file in the slider image container to show a simple transparent Slide as shown here:

<img src="images/transparent.png" alt="">

1	<img src="images/transparent.png" alt="">

You may need to change the path to reference on the correct transparent.png file.

Link & Seo

Links can be added on Slides and on Layers like HTML, Image, Shapes, Buttons. Links on Slides defined via parameters within the List element (li) Tag.

Slide Links defined via the data-link and data-target and data-linktoslide attributes. All settings are defined above in Slide Settings.

Slide Parallax Effect

You can define parallax effects on Main Backgrounds (images, videos) via a single data attribute : data-bgparallax added to the Main Background img tag (also for videos !!)

The parallax behavior is defined due the Slider Options where you can define an array of Parallax strengths and directions, dependencies.

To set main Settings of the slider, please take a look on the Capital Parallax.

i.e.:

<img
 src="bgimage.jpg"  alt=""  width="1920" height="1080" 
data-bgposition="center center" data-bgfit="cover" 
data-bgrepeat="no-repeat" data-bgparallax="2" class="rev-slidebg">

1	<img src="bgimage.jpg" alt="" width="1920" height="1080" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="2" class="rev-slidebg">

data-bgparallax Type:String
Value:"off", "1".."10"

Defines the Parallax effect on the Background Image or Video. Off turns the effect off, values 1..10 are Reference indexes which pulls the settings from the Parallax array defined via the Slider Settings here.

Ken Burns Effect

An elegant pan/zoom that will move and scale the main background image slowly after the slide comes into view.

Horizontal / Vertical Offsets

These offset values are in relation to your main background image’s Background Position value.

For example, if your Background Position is “center center”, entering a Horizontal Offset of “100” would mean 100px to the right of the very center, which would then serve as the starting position of the Ken Burns effect. And a Horizontal Offset of “-100” would be 100px to the left of center.

Important Note

The main background image’s “Background Position” plays an important role when setting up your Ken Burns effect.

For an example, set your “Scale To” value to “200”, and your “Scale From” value to “100”. Then set the image’s “Background Position” to “center center” and preview the slide.

Then go back and change the “Background Position” to “top left”, and this will give you a good idea of how the main image’s “Background Position” impacts the Ken Burns animation.

<img
 src="bgimage.jpg"  alt=""  width="1920" height="1080" 
data-bgposition="center center" data-kenburns="on" data-duration="10000"
 data-ease="Power3.easeInOut" data-scalestart="100" data-scaleend="120" 
data-rotatestart="0" data-rotateend="40" data-offsetstart="-250 -100" 
data-offsetend="250 150" data-bgparallax="2" class="rev-slidebg" 
data-no-retina>

1

data-kenburns Type:String
Value:"on","off"

Enables/Disables the Ken Burns Effect.

data-duration Type:Integer
Value:10000

The duration length of the Ken Burns Effect. It should be same or longer then the length of Slide Duration defined per slide or default in slider settings.

data-ease Type:Ease
Value:"Power3.easeInOut"

The Ease effect of the Ken Burns Effect. You find a table of all possible values here.

data-scalestart Type:Integer
Value:"100"

The start Zoom Value. If the image would not cover the container any more, it will be automatically corrected to the next possible value.

data-scaleend Type:Ease
Value:"Power3.easeInOut"

The End Zoom Value of the Ken Burns Effect. If the image would not cover the container any more, it will be automatically corrected to the next possible value.

data-offsetstart Type:px px
Value:"-250 -100"

Two values, Horizontal and Vertical offsets for the Start position. It will be related to the Scale and background position settings, and from that position it will move the full slide offsetting with the values set here. i.e -250 -100 will move the slide 250px to the right and 100 px to the bottom at start.

data-offsetend Type:px px
Value:"250 100"

Two values, Horizontal and Vertical offsets for the End position. It will be related to the Scale and background position settings, and from that position it will move the full slide offsetting with the values set here. i.e 250 100 will move the slide 250px to the left and 100 px to the Top at the end of the ken burns effect.

data-rotatestart Type:Degree
Value:"0"

Defines the rotation degree of the SlideMain image at the start of the Ken Burns Effect. Use small values (positive or negative). i.e. “-5” for a smooth and clever effect.

data-rotateend Type:Degree
Value:"0"

Defines the rotation degree of the Slide Main image at the end of the Ken Burns Effect. Use small values (positive or negative). i.e. “-5” for a smooth and clever effect.

Transition Table

BASICS
notransition: No Transition
fade: Fade

SLIDE SIMPLE
slideup: Slide To Top
slidedown: Slide To Bottom
slideright: Slide To Right
slideleft: Slide To Left
slidehorizontal: Slide Horizontal (Next/Previous)
slidevertical: Slide Vertical (Next/Previous)

SLIDE OVER
slideoverup: Slide Over To Top
slideoverdown: Slide Over To Bottom
slideoverright: Slide Over To Right
slideoverleft: Slide Over To Left
slideoverhorizontal: Slide Over Horizontal (Next/Previous)
slideoververtical: Slide Over Vertical (Next/Previous),

SLOTS AND BOXES
boxslide: Slide Boxes
slotslide: orizontal=>Slide Slots Horizontal
slotslide: ertical=>Slide Slots Vertical
boxfade: Fade Boxes
slotfade: orizontal=>Fade Slots Horizontal
slotfade: ertical=>Fade Slots Vertical

FADE & SLIDE
fadefromright: Fade and Slide from Right
fadefromleft: Fade and Slide from Left
fadefromtop: Fade and Slide from Top
fadefrombottom: Fade and Slide from Bottom
fadetoleftfadefromright: To Left From Right
fadetorightfadefromleft: To Right From Left
fadetotopfadefrombottom: To Top From Bottom
fadetobottomfadefromtop: To Bottom From Top

PARALLAX
parallaxtoright: Parallax to Right
parallaxtoleft: Parallax to Left
parallaxtotop: Parallax to Top
parallaxtobottom: Parallax to Bottom
parallaxhorizontal: Parallax Horizontal
parallaxvertical: Parallax Vertical,

ZOOM TRANSITIONS
scaledownfromright: Zoom Out and Fade From Right
scaledownfromleft: Zoom Out and Fade From Left
scaledownfromtop: Zoom Out and Fade From Top
scaledownfrombottom: Zoom Out and Fade From Bottom
zoomout: ZoomOut
zoomin: ZoomIn
slotzoom: orizontal=>Zoom Slots Horizontal
slotzoom: ertical=>Zoom Slots Vertical

CURTAIN TRANSITIONS
curtain: =>Curtain from Left
curtain: =>Curtain from Right
curtain: =>Curtain from Middle

PREMIUM TRANSITIONS
3dcurtain: orizontal=>3D Curtain Horizontal
3dcurtain: ertical=>3D Curtain Vertical
cube: Cube Vertical
cube: orizontal=>Cube Horizontal
incube: In Cube Vertical
incube: orizontal=>In Cube Horizontal
turnoff: TurnOff Horizontal
turnoff: ertical=>TurnOff Vertical
papercut: Paper Cut
flyin: Fly In

SLIDE REMOVE
slideremoveup: Slide Remove To Top
slideremovedown: Slide Remove To Bottom
slideremoveright: Slide Remove To Right
slideremoveleft: Slide Remove To Left
slideremovehorizontal: Slide Remove Horizontal (Next/Previous)
slideremovevertical: Slide Remove Vertical (Next/Previous),

RANDOM
random: elected=>Random of Selected
random: tatic=>Random Flat
random: remium=>Random Premium
random: Random Flat and Premium

Ease Table

Default – Will Pick the best possible Ease
Linear.easeNone
Power0.easeIn
Power0.easeInOut
Power0.easeOut
Power1.easeIn
Power1.easeInOut
Power1.easeOut
Power2.easeIn
Power2.easeInOut
Power2.easeOut
Power3.easeIn
Power3.easeInOut
Power3.easeOut
Power4.easeIn
Power4.easeInOut
Power4.easeOut

Quad.easeIn
Quad.easeInOut
Quad.easeOut
Cubic.easeIn
Cubic.easeInOut
Cubic.easeOut
Quart.easeIn
Quart.easeInOut
Quart.easeOut
Quint.easeIn
Quint.easeInOut
Quint.easeOut
Strong.easeIn
Strong.easeInOut
Strong.easeOut
Back.easeIn
Back.easeInOut
Back.easeOut

Bounce.easeIn
Bounce.easeInOut
Bounce.easeOut
Circ.easeIn
Circ.easeInOut
Circ.easeOut
Elastic.easeIn
Elastic.easeInOut
Elastic.easeOut
Expo.easeIn
Expo.easeInOut
Expo.easeOut
Sine.easeIn
Sine.easeInOut
Sine.easeOut
SlowMo.ease

Back

Contents