Alternative Mobile Slider

If you’d like to display an alternative slider for mobile, you can accomplish this by creating 2 sliders, and then toggling their CSS “display” property using a CSS media query.

1. Step One

Create two sliders, one designated for desktop and one designated for mobile, and add the shortcodes to your web page (the alias names “mobile” and “desktop” shown in the screenshot below are just examples. Your sliders’ “alias” name will be specific to whatever you happened to name your slider).

2. Step Two

View the front-end of the page in your web browser, and view the page’s HTML source. Then scroll to where you see the HTML comment “START REVOLUTION SLIDER”. If you’ve added two sliders to the page, you’ll find two instances of the slider’s HTML code. In each instance, we’ll grab the “ID” of the slider’s main HTML wrapper:

Desktop Version

Mobile Version

3. Step Three

Head over to one of the two slider’s main settings page (doesn’t matter which one), and scroll to the “CSS/JavaScript” section:

Then paste the following code into this section, updating the CSS “ID” part for your sliders. In the example below, “#rev_slider_3_1_wrapper” is the CSS selector for our desktop slider, and “#rev_slider_4_2_wrapper” is the CSS selector for our mobile slider.

SPECIAL NOTE: Is the above setup not working? Or do you have extra space after implementing the setup?

Chances are you’re using the “Force Full Width” option for your slider, which wraps the “rev_slider_wrapper” element in an additional div for the force-full-width functionality. In this case, include the following script to the “Custom JavaScript” section for the workaround:

First, get your slider’s “revapi” number:

Then add the following script to the slider’s “Custom JavaScript” section, and change the “revapi1” part to whatever “revapi” number is being used for your slider.