Slider Revolution WP
09.27.2016
Visual Composer Tabs, Tour, Accordion and Pageable Container
How to use Slider Revolution inside your favorite Visual Composer components.also useful for creating category-based photo galleries
1. Add your Visual Composer Tabs, Accordion, Tour or Pageable Container.
3. Add the following custom CSS and JavaScript to your Slider Revolution.
Important Code Notes:
- The code is “global”, which means two things:
- will work for all sliders inside your VC components.
- should only be added once to a single slider’s Custom CSS/JavaScript section.
- The code does not need to be edited at all (just a straight copy and paste).
Where to add the code:
The CSS:
|
1 2 3 |
.tp-vc-inactive {opacity: 0 !important} |
The JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/* needed to make sure code is always executed last */ jQuery(document).ready(function() { var sliders = [], timer; jQuery('.rev_slider').each(function(i) { var id = jQuery(this).attr('id'), slider = sliders[i] = eval('revapi' + id.split('rev_slider_')[1].split('_')[0]); if(!slider.closest('.vc_active').length) { slider.addClass('tp-vc-inactive'); } else { // always redraw active tab for variable "Active Section" slider.one('revolution.slide.onloaded', function() {slider.revredraw();}); } }); // buttons to listen for var classes = '.vc_tta-tabs-list .vc_tta-tab,' + '.vc_pagination .vc_pagination-item'; jQuery('body').on('click', classes, function() { clearInterval(timer); var $this = jQuery(this); // bounce if active tab button is clicked if($this.hasClass('vc_active') || ($this.hasClass('vc_tta-panel') && !$this.closest('.vc_tta-accordion').length)) return; // temporarily hide new tab to be shown var slider = sliders[$this.index()].addClass('tp-vc-inactive'), panel = $this.children('a'); panel = panel.length ? jQuery(panel.attr('href')) : $this; // wait for the tab to animate in, then redraw and show timer = setInterval(function() { if(!panel.hasClass('vc-animating')) { clearInterval(timer); slider.revredraw().removeClass('tp-vc-inactive'); } }, 100); }); }); |
USAGE EXAMPLE:
Use Visual Composer Tabs/Accordion/Tour to create an easy to manage category-based Gallery.
The idea is to have one Slider Revolution per category, and then each slider can be setup and managed for that specific category:
