Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Slides

08.15.2015Krisztian

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!

!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.

!UPDATE – New Class available for Invisible Slide!

To hide a Slide from the Normal Slider Progress please use the Class tp-invisible-slide. The Slide will be only due Slide Actions and due API Methods available. i.e. Use for Read More Slide triggered due some Layer or Extern Function.

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-ssop Type:Boolean
Value:true,false

Defines if the Slider Progress should be stopped at this Slide till the Slide is active. This way the Auto Progress can be paused till any other slide has been called. Possible values false / true.

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 https://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:

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

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

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=https://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:

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:

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.:

 

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.

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
  • crossfade: Cross Fade
  • fadethroughdark: Fade through Dark BG
  • fadethroughlight: Fade through Light BG
  • fadethroughtransparent: Fade through predefined BG
  • 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,
  • SLIDING OVERLAYS
  • slidingoverlayup: Sliding Overlays to the Top
  • slidingoverlaydown: Sliding Overlays to the Bottom
  • slidingoverlayright: Sliding Overlays to the Right
  • slidingoverlayleft: Sliding Overlays to the Left
  • slidingoverlayhorizontal: Sliding Overlays Horizontal
  • slidingoverlayvertical: Sliding Overlays 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-horizontal=>3D Curtain Horizontal
  • 3dcurtain-vertical=>3D Curtain Vertical
  • cube: Cube Vertical
  • cube-horizontal=>Cube Horizontal
  • incube: In Cube Vertical
  • incube-horizontal=>In Cube Horizontal
  • turnoff: TurnOff Horizontal
  • turnoff-vertical=>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-selected=>Random of Selected
  • random-static=>Random Flat
  • random-premium=>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