Revolution Slider - Custom JS/CSS overwritten by later executing JS

[jalberts]

I know this is specific to a bundled plugin, not the theme, but I’m hoping someone has come across this before. I’m not necessarily expecting the support crew to help out.

I’ve got a simple shape on a slider (full width). I want to apply a CSS transform to it, so I’ve added custom layer CSS. Shows up fine on the back-end, but gets overwritten on the front-end.

So I added some custom JS to the slider:

var revapi = revapi1;
revapi.on('revolution.slide.onloaded',function (e) {
	console.log('Slider Loaded');
	jQuery('#slide-1-layer-5').css('transform', 'skewY(-10deg) translate(0, 40%)');
});

Works perfectly fine if run in the console, but again appears to be overwritten by later executing JS.

I’ve pinned it down to the CSS Plugin in jquery.themepunch.tools.min.js. I can’t seem to figure out what event it’s firing on though (tried breakpoint event listening on onload event and that didn’t catch it).

Any one know how to manipulate this CSS and not get it overwritten by the CSS Plugin in tools? Either by firing it off after, or passing an overriding argument to the function that’s running in the first place.

Edit: Sorry, I didn’t realize there was a peer-to-peer forum that this probably makes more sense in. I also don’t see a way to move it there now that it’s posted.

[rad]

Hi there,

Thanks for writing in.

Most slides are cloned by the slider itself (unless it’s a hero slider) to create an infinite sliding effect. Your code may be working , but on the original slide. Have you tried adding delays to it?

Example,

var revapi = revapi1;
revapi.on('revolution.slide.onloaded',function (e) {
	console.log('Slider Loaded');
setTimeout( function() {
	jQuery('#slide-1-layer-5').css('transform', 'skewY(-10deg) translate(0, 40%)');
}, 2000 );  //2 seconds delay
});

Just to make sure all slides are generated and processed before executing your code. You may increase it, adding in console works since the slider rendering is already completed.

Thanks!

[jalberts]

Ah, sorry, I should have clarified: it is a hero slider.

I thought about adding a delay (and I’ll try it), but it seems like I should be able to hook into the function or fire the new one off immediately after (programatically - without a timed delay).

Feel free to move this to the Peer-to-Peer forum, too. It doesn’t seem like I can do so after the initial post.

[jalberts]

Yeah, delays work. I’d rather not do it this way though; variability in load times means I’d need to make the delay large enough that it will be noticeable.

[mldarshana]

Glad it works for you now

[jalberts]

It’s not quite what I’d call “working as intended”. Is it possible to move this over to the Peer-to-Peer forum to see if others have run across this and found a better solution, or should I just open a new thread there and copy my initial question?

[paul.r]

Hi,

You may open a new thread and copy your initial question.

Thanks