Slider Revolution WP
09.27.2016
Show Layer content for non-active Carousel slides
Normally Layers in Carousel Sliders will animate-in when the slide enters the "center" position, as shown in this example.But the following technique can be used if you'd like to show Layers by default at all times as "static" content.
1. Add the following CSS to your slider's Custom CSS section
|
1 2 3 |
.rev_slider * {visibility: visible !important; opacity: 1 !important} |
2. Add the following script to your slider's Custom JavaScript section
Edit the “revapi1” part toward the top with your slider’s ID number.
|
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 |
/* replace the "1" below in the "revapi1" part with your slider's ID */ /* https://tinyurl.com/zb6hzpc */ var api = revapi1; /* no need to edit below */ api.on('revolution.slide.onloaded', function() { api.find('.tp-revslider-slidesli').not('.tp-invisible-slide').each(setLayers); jQuery(window).on('resize focus', onResize); }); function setLayers() { jQuery(this).find('.tp-caption').each(function() { var data = jQuery(this).data(); delete data['mask_in']; delete data['mask_out']; data['transform_in'] = 's:100;e:Linear.easeNone;'; data['transform_out'] = 's:100;e:Linear.easeNone;'; }); setPositions.call(this); } function setPositions() { jQuery.fn.revolution.animateTheCaptions(jQuery(this), api.data('opt'), true); } function onResize(event) { clearTimeout(timer); timer = setTimeout(resized, 100); } function resized() { api.find('.tp-revslider-slidesli').not('.tp-invisible-slide').each(setPositions); } |
