Revolution slider change background image on mobile

Initially, I didn't think you could. But, it turns out that you can! You just have to make two sliders, then cleverly hide one or the other.

If it's just a matter of the picture dimensions, you can give each slider size a custom size. I have done this to accommodate not being able to read text on the slides when viewing on mobile. By stretching the height of the mobile version, I can now read the text on the images and, thus, problem solved.

You can also just disable the slider when viewing on mobile, like this.


So, in version 6 at least, you can do this by adding a shape layer with a background image and hide/show that layer depending on screen size.

  1. Make a new shape layer.
  2. Go to "Size & Pos" in the layer options.
  3. Set the "Size Presets" to Cover.
  4. Set the "Layer Align" to Scene.
  5. Go to "Visibility" in the layer options.
  6. Hide the layer on all the screen sizes you don't want it to show on.
  7. Make sure your shape layer is at the bottom of the layer stack.
  8. Go to "Style" in the layer options.
  9. Pick a background image.
  10. Make sure it's set to cover in the Position section.

And that should do it. Hope that helps someone.

You might have to fuss with the responsive settings. If you don't really understand the nuances of these settings, I found this video (Slider Revolution 6.0 Responsive Settings) super helpful.