Within the Engine folder you will see a file "style.css"
1. Where you have more than one WOW slider, each will have a different ID which you will have selected on export (e.g. Engine1, Engine2 ).
2. Where too you want to use the WOW slider in a variant, it must have a different ID, and each will have its own Engine.
Use a text editor to open the style.css file and look for a similar CSS to that below: In your CSS you will see z-index: 0; Change this to z-index: -1;
HTML Code:
#wowslider-container1 {
display: table;
zoom: 1;
position: relative;
width: 100%;
max-width: 100%;
max-height:200px;
margin:0px auto 0px;
z-index:-1;
text-align:left; /* reset align=center */
font-size: 10px;
text-shadow: none; /* fix some user styles */
/* reset box-sizing (to boostrap friendly) */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Here is an example https://initiostar.co.uk/demo/WOW/
Note that by moving the slider backwards, you will lose its touch-swipe capability, but for full-width sliders that is probably not an issue. But you can now add text or any other objects as overlays on that slider.
Word of caution! this may not work when you add WOW navigation controls to a slider (WOW use other z-index parameters). And no guarantees this will work in all cases.
Personally, I have stopped using WOW because there are much better ways of doing this (example in the WOW link above).
Gary
Bookmarks