Update Path

This article is now outdated!

Click here to visit the documentation for version 5.3+

The Update from previous version to 5.0 is a huge step forwards. Many things has been changed since the last version 4.6.93, just like the core of Slider Revolution has been reviewed and recoded. Also tons of new features and options has been added.

We try hard to create updates with 100% downwards compatibility, however sometimes the technological progress just does not give us all the freedom to fill this requirement.

This short capital will help you to navigate through the update process, and hopefully saves you some  headache.

As first, and most important act, please make sure that you created a full backup of your folders and files before you update to Slider Revolution 5.0 !

Using the revolution.extension.migration.min.js  file under the revolution/js/extensions folder can help to quick update from 4.x to 5.x, however it will not change your Markup and Content in your Old Documents, means at least by next major updates the slider will break.

The most easiest way is to work with one of our examples (35+ added to this download package), and rebuild your sliders from scratch This would  make sure that you don’t miss to change some of the options, classes, markup structure in your Sliders.

Preparation

In case you decide to edit the current Documents and wish to update the existing sliders, you should make sure that you dont miss the following points:

upload your revolution folder, maybe renaming it to revolution5.0 to better differentiate between old and new version to your server.

Duplicate the Document you wish to update,  go through the following cases, and test your changes before you go live with it.

Slider Settings Changes

Please be aware that the Slider Settings has been massive changed.

Most of the Option Names has been renamed, and the option Structure in 5.0 become object oriented.

Most Important Changes:

startwidth -> gridwidth
startheight ->gridheight

fullScreen=”on” -> sliderLayout=”fullscreen”
fullWidth=”on” -> sliderLayout=”fullwidth”
fullScreen=”off”, fullWidth=”off” -> sliderLayout=”auto”

parallax Options changed as shown here:  new Parallax Options

hideTimerBar -> disableProgressBar

The Full Optionset of Navigation Settings has been updated to an object based setting. (i.e. navigationArrows, navigationType, hideArrowsOnMobile, hideNavDelayOnMobile, thumbWidth, thumbHeight …. )  changed to new Navigation Settings

Any type of FallBacks has been changed to an object based setting. See it under new Fallback Settings.

 

We advise to go through the full list of Slider Initialisation Settings and change, remove, add the options you may need to your slider !

Single Slide Markup Changes

Slide Markups has been only a little bit changed. Here is a small overview of the most important changes, add ons:

  • New data attributes are available now to define Easing, Speed, Delay for transitions.
  • New data attributes like data-title, data-description, data-parameters has been added to define individual content per text to pull these into Thumbnails and Tabs
  • data-index and id can be now defined per Slides for better navigation, and Layer Actions
Layer Settings and Markup Changes

We tried hard to keep the most existing attributes and classes similar to previous versions.  However we still needed to move some of those to a new level.

Remember using Classes for Transitions ? This has been removed now.  Using the revolution.extension.migration.min.js file you can keep your old classes and let Slider Revolution Plugin to build the Animation Libraries on the fly, however we would advise to go and update to the new Animation Settings like shown below:

We introducing in version 5.0 the following data-attributes for Transitions:

  • data-transform_in
  • data-transform_out
  • data-transform_idle
  • data-transform_hover
  • data-hover_style

Some Examples how Classes changed to data- attributes:

Before: class randomrotate
Now: data-transform_in=”x:{-400,400};y:{-400,400};sX:{0,2};sY:{0,2};rZ:{-180,180};rX:{-180,180};rY:{-180,180};o:0;”

Before: class lfl
Now: data-transform_in=”x:top;o:0″

We demonstrate all Transition Changes via our Demos in the downloaded Package. Please look through our Examples and Previews to get a much better overview.

Also all Transitions Attributes can be found here and everything about the new Layer Settings are listed here.