Slider Revolution WP
09.27.2016
Slider In Tabs
This article is now outdated!
Visit this article instead for an updated version.
In case the Slider is added to a Tab, which hides the not visible content, the slider will still play further, and once the Tab is selected, the Slide will not be visible.
The issue based on the Calculation of the Slider Dimensions. To prevent this you can listen on the Tab Changes, and trigger the revredraw / revresume / revpause Methods of the slide, based on those events.
Once you open a Tab which is usually animate the opening with fade or scale effect, the slider need to be redrawed. The Slider only acts on Window resizing but not on the resizing of sourounding / wrapping containers.
You will need to build a custom js function which fires a function as soon the Tab button has been clicked.
A very simple form could look something like this:
|
1 2 3 4 5 |
jQuery(".yourtabbuttons").click(function() { jQuery(window).trigger("resize"); }); |
This can be built more advanced where you stop and resume the Slider which is embeded in the tab via the Slider API: (note we have two different Slider in Two Tabs here):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//Wait till the Slider with API11 is loaded revapi11.bind("revolution.slide.onloaded",function (e) { revapi11.revpause(); jQuery('.youttab1button').click(function() { revapi11.revplay(); revapi12.revpause(); revapi11.revredraw(); // OR use the Resize Event ->> jQuery(window).trigger("resize"); }); }); //Wait till the SLider with API12 is loaded revapi12.bind("revolution.slide.onloaded",function (e) { revapi12.revpause(); jQuery('.youttab2button').click(function() { revapi12.revplay(); revapi11.revpause(); revapi12.revredraw(); // OR use the Resize Event ->> jQuery(window).trigger("resize"); }); }); |
The slider has a special section where custom JavaScript can be added. This section can be found inside the slider’s main settings page:
