Different sliders for desktop and mobile

Last updated on

Product

WonderPlugin Slider

Question

Some of our pages function better with different skins depending on whether we are using desktop or mobile.

Is there a way to use different skins for desktop and mobile?

Answer

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;
  }
}