Slider Revolution is a WordPress plugin for creating slideshows. It’s a great flexible plugin, one of the most popular out there and we use it a lot. But nothing is perfect. One specific flaw in this plugin is the lack of option to hide a slide on desktop screens. This is odd because you can hide a slide on mobile, you can hide an individual layer of a slide on mobile or desktop, but you can’t hide an entire slide on desktop.

Problem

Why would anyone need to hide a slide on large screens? Working on the Facets of Beauty website, we were building a slider for the homepage. We’re using a series of images with the subject on the left and space on the right hand side for a right aligned hero-title. On tablet and phone screens there isn’t enough room to align the title on the right, so we centred the text and used images with the subject in the centre.

This necessitates the use of two different groups of slides. We can hide slides on mobile, so on mobile screens the slideshow only displays the correct slides. On desktop we’re stuck showing both mobile and desktop slides.

We have searched the plugin code for hiding slides on mobile for a handy hook or filter that would allow us to add some logic of our own, but there isn’t one. This is particularly annoying, as it would’ve taken only a few minutes to write the necessary code. So, instead, we’ll need to do some lateral thinking.

Workaround

Our workaround was instead of creating two slides and setting a background for each, we created one slide and added two layers. Each layer functions as a background. Since layers can be hidden on desktop or mobile we simply set one layer to be visible on desktop and the other to be visible on mobile.

Here’s how to do it:

• Create a new slide in your slider of choice.
• Add two image layers. Make sure you’re using big enough images.
• In the Main Background tab of the slide settings don’t set a background.
• For each layer set the following:
  • Under the Style tab
    • Set Cover Mode to ‘Cover’.
    • Centre the layer vertically and horizontally.
  • Under the Visibility tab select the devices you want the layer to display for on Visibility on Devices. In our case we set the girl with the cloth to be visible on phones and tablets, and the girl with the sunnies to be visible on desktops and laptops.
  • Under the Behavior tab, set Align to ‘Slide Based’. Activate Auto Responsive.

That’s pretty much it. You can see the results by viewing the Facets of Beauty homepage slideshow on mobile and on desktop PC.

In our situation we have all the text on the Static/Global Layers slide, so each slide is just a background image. Your situation may be more complex. These adhoc backgrounds are a little less flexible than the actual slide background functionality. For example positioning the backgrounds anywhere other than centre can cause white space appearing where you probably don’t want it.

Alternative

An alternative solution would be to create two slideshows, one for desktop and one for mobile. In the theme’s page-template you could then write some code to detect whether the website is being viewed on a mobile device or a desktop device and load the relevant slider. You can see an example of this solution is action in this Stack Overflow question.

This workaround is stupid

Agreed. We’ve asked ThemePunch to add this feature to the plugin and they’ve apparently added it to their request list. Until it’s implemented, hopefully someone finds this workaround useful. If you do, feel free to praise us in the comments.