Product:

Wonder Slider

Question:

How can I display a different slider on mobile and tablet devices?

Continue reading →

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