We are currently developing a wordpress website for a new client that requires advanced slider functionality (basically moving/sliding promotional images near the top of home page). Because of the custom navigation design that differs a lot from “off the shelf” solution we have chosen to work with the feature packed Slider Revolution (jQuery version). We have also decided to not use the plugin version so that we can work with the settings directly and optimise as needed.
From their website…
Slider Revolution is an innovative, responsive jQuery Slider Plugin that displays your content the beautiful way. Whether it’s a Slider, Carousel, Hero Scene or even a whole Front Page, you will be telling your own stories in no time!
We love the ability to create multiple dynamic and static layers for each slide. While the markup did take a little to get used to, we are now able to create very advanced layouts and navigation modules.
Slider Revolution Static layers Disappear & How to Fix
One issue that had us stumped for a little while, was our static navigation (created as separate static layers) would disappear after the third slider rotation (we have a total of 5 slides). Chrome dev tools indicated the static layers were hidden after the third slide. Turns out the solution was right in front of us.
The default config for each navigation slider had the data-endslide value at 3 (0 = slide 1, 2 = slide 3). Changing these values to the following made all static layers that were hidden on slides 4/5 reappear.
The slider has a wealth of responsive settings allowing specific font and margin customisation for different devices. We are even utilizing a very handy blend setting to overlay an 50% opaque black layer to darken the background image and make the slide text more visible.Tags: PHP, Website Design, Wordpress