Search code examples
wordpressrevolution-slider

Can i set Revolution slider for desktop and mobile separately?

I'm building a photography website in Wordpress and on the home page, I want to set a different slider for mobile and desktop as the given requirement. So how can I do that?

Solution

  • You can create two WordPress sliders, one for mobile, one for desktop.

    • After you have created two sliders, you can add the following code to your post or page. Please be sure to change the ID value in the code to that of your own sliders.
    <div id="largescreen">
[wonderplugin_slider id="1"]
</div>

<div id="smallscreen">
[wonderplugin_slider id="2"]
</div>
    • Then you can add the following CSS code to your WordPress theme style.css file to show the small slider when the screen width is less than 640px:
    #largescreen {
  display: block;
}

#smallscreen {
  display: none;
}

@media (max-width: 640px) {
  #largescreen {
    display: none;
  }

  #smallscreen {
    display: block;
  }
}