Adding/Updating Rev Slider Icon

Ppowered_by_coffeeFeb 10, 2021

Our issue, that when testing the demo version of the "premium-beforeafter.html" users are not realizing they can click and hold to slide the hero image.

In order to fix this issue. We would like to add some text that says "slide me" next to the icon. Is there a way we can add the text to the code or upload a custom svg icon that has the "slide me" text next to it?

Thank you for your help,
Joe

Additional info

The icons (leftIcon, rightIcon) are being referenced in this piece of code:

		RevSliderBeforeAfter(tpj, revapi77, {
			arrowStyles: {
				leftIcon: "icon-caret-left", 
				rightIcon: "icon-caret-right",

Here is the full script we are running:

&lt;script&gt;
	var revapi77,
	tpj=jQuery;
	var $ = jQuery.noConflict();

	tpj(document).ready(function() {
		if(tpj("#rev_slider_77_1").revolution == undefined){
			revslider_showDoubleJqueryError("#rev_slider_77_1");
		}else{
			revapi77 = tpj("#rev_slider_77_1").show().revolution({
				sliderType:"standard",
				jsFileLocation:"include/rs-plugin/js/",
				sliderLayout:"fullwidth",
				dottedOverlay:"none",
				delay:9000,
				particles: {startSlide: "2", endSlide: "2", zIndex: "1",
					particles: {
						number: {value: 80}, color: {value: "#FFF"},
						shape: {
							type: "circle", stroke: {width: 0, color: "#FFF", opacity: 1},
							image: {src: ""}
						},
						opacity: {value: 0.5, random: true, min: 0.25, anim: {enable: false, speed: 3, opacity_min: 0, sync: false}},
						size: {value: 2, random: true, min: 0.5, anim: {enable: false, speed: 40, size_min: 1, sync: false}},
						line_linked: {enable: false, distance: 150, color: "#FFF", opacity: 0.4, width: 1},
						move: {enable: true, speed: 1, direction: "none", random: true, min_speed: 1, straight: false, out_mode: "out"}},
					interactivity: {
						events: {onhover: {enable: false, mode: "repulse"}, onclick: {enable: false, mode: "repulse"}},
						modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.4}, repulse: {distance: 200}}
					}
				},
				navigation: {
					keyboardNavigation:"off",
					keyboard_direction: "horizontal",
					mouseScrollNavigation:"off",
					 mouseScrollReverse:"default",
					onHoverStop:"off",
					arrows: {
						style:"gyges",
						enable:true,
						hide_onmobile:false,
						hide_onleave:false,
						tmp:'',
						left: {
							h_align:"center",
							v_align:"bottom",
							h_offset:-20,
							v_offset:0
						},
						right: {
							h_align:"center",
							v_align:"bottom",
							h_offset:20,
							v_offset:0
						}
					}
				},
				responsiveLevels:[1240,1240,1240,480],
				visibilityLevels:[1240,1240,1240,480],
				gridwidth:[1200,1200,1200,480],
				gridheight:[800,800,800,700],
				lazyType:"none",
				parallax: {
					type:"mouse+scroll",
					origo:"slidercenter",
					speed:400,
				  speedbg:0,
				  speedls:0,
					levels:[1,2,3,4,5,6,7,8,12,16,47,48,49,50,51,55],
				},
				shadow:0,
				spinner:"off",
				stopLoop:"on",
				stopAfterLoops:0,
				stopAtSlide:1,
				shuffle:"off",
				autoHeight:"off",
				fullScreenAutoWidth:"off",
				fullScreenAlignForce:"off",
				fullScreenOffsetContainer: "",
				fullScreenOffset: "",
				disableProgressBar:"on",
				hideThumbsOnMobile:"off",
				hideSliderAtLimit:0,
				hideCaptionAtLimit:0,
				hideAllCaptionAtLilmit:0,
				debugMode:false,
				fallbacks: {
					simplifyAll:"off",
					nextSlideOnWindowFocus:"off",
					disableFocusListener:false,
				}
			});
			var ua = window.navigator.userAgent;
			var msie = ua.indexOf("MSIE ");

			if(msie &gt; 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./) || ('CSS' in window && 'supports' in window.CSS && !window.CSS.supports('mix-blend-mode', 'screen'))) {

			 var bgColor = 'rgba(245, 245, 245, 0.5)';
			 //jQuery('.rev_slider .tp-caption[data-blendmode]').removeAttr('data-blendmode').css('background', bgColor);
			 jQuery('.rev_slider .tp-caption.tp-blendvideo[data-blendmode]').remove();
			}
		}

		RsParticlesAddOn(revapi77);

		RevSliderBeforeAfter(tpj, revapi77, {
			arrowStyles: {
				leftIcon: "icon-caret-left", 
				rightIcon: "icon-caret-right",
				topIcon: "icon-caret-up",
				bottomIcon: "icon-caret-down",
				size: "45",
				color: "#FFF",
				bgColor: "transparent",
				spacing: "10",
				padding: "0",
				borderRadius: "0"
			},
			dividerStyles: {
				width: "1",
				color: "rgba(255, 255, 255, 0.5)"
			},
			onClick: {
				time: "500",
				easing: "Power2.easeOut",
			},
			cursor: "move",
			carousel: false
		});
	});	/*ready*/
&lt;/script&gt;

SSemicolon WebSTAFFFeb 10, 2021

Hello,

Unfortunately, the Before/After Plugin provided by Revolution Slider does not include any Option to add Custom Content to the Slider Area: https://www.themepunch.com/revsliderjquery-doc/before-after/ . This will require moderate Customizations.

You can add some JS Codes like this:
[ch_pre type="js"]revapi77.on("revolution.slide.onloaded",function (e) {
setTimeout( function(){
jQuery( '.tp-bannertimer' ).eq(0).after('<div class="rs-addon-beforeafter-slideme-btn btn bg-white border-0 text-dark position-relative" style="z-index: 102;">Slide Me</div>');
}, 1000 );
});[/ch_pre]

at the bottom of the Page after the RevSliderBeforeAfter Settings. This code will add a Button inside the Slider Container. However, you will need to Customize the CSS according to your needs to position the Button correctly.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.