I have a fairly complex Slider Revolution slider with a slide in it that has almost 20 layers animated. I’m having trouble getting all those layers to show up on a smartphone. I’ve come up with an alternative slider that has single layer slides and simple fade transitions between them that works just fine on a mobile.
I’d like to have my home page show the complex slider on desktops and the mobile slider on smartphones. The Slider Revolution 5.x idea of using only one slider with alternative hidden layers is just going to make things even more complex.
How do I use alternative sliders for mobile and desktop? It’s the simplest solution for this case.
Normally you can not have two different sliders for one page, using page’s General Settings. But here it is a workaround for your case:
-Assign the complex slider in your page’s General Settings > Slider Options (screenshot). Make sure to set ON the “Remove slider from mobile view” option.
-Add a “Revolution Slider” Visual Composer element in the start of your page. Select to show here the simple slider and add a custom css class to it. See the screenshot.
Add this css into the page’s custom css box, to hide it in desktop view:
