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

8MB Upload Size Limit

Last updated on

Product:

WonderPlugin Gallery, WonderPlugin Slider, WonderPlugin Portfolio Grid Gallery

Question:

Is 8MB the largest upload size you offer with the WordPress portfolio grid gallery? I tried to add a video file but the video was way too large.

Answer:

8MB is a limit from your web server.

You need to change the web server PHP configuration file to change the limit. If you are using a shared web hosting, you need to contact your web hosting provider and ask them to make the change.

Or you can upload the video file to your web server via FTP client software, then add the video URL link directly to the plugin.

Different texts for big screens and mobile devices

Last updated on

Product:

WordPress Slider Plugin

Question:

It isn't possible to have two different texts?

One that is long and works in "big screens" and one that works on phones etc?

Answer:

In your title, you can try to enter HTML code like following:

<span class="largescreen">This title is for large screen</span><span class="smallscreen">This title is for small screen</span>

Then in the plugin, step 3, Options tab, Advanced Options, enter the following text to the Custom CSS box:

.largescreen {
  display: block;
}
.smallscreen {
  display: none;
}

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

The above CSS code will hide the text of class largescreen and show the text of class smallscreen when the screen width is less than 640px.

Customize Text Effect of WordPress Slider Plugin

Last updated on

Product:

WordPress Slider Plugin Version 3.2 and above

Question:

I’ve downloaded your wonder plugin slider. It’s a really nice tool and the text navigation is exactly what I’ve been looking for to use on a website I’m working on.

When creating images for the slider there are fields to enter the title and description. The title shows up in the navigation text, but what about the description? I’d like to be able to have the image show with the title and description on the right side of slider, while still keeping the tabbed text navigation. Is this possible through CSS, or an available option in the commercial version?

Continue reading →

Customize the WonderPlugin Slider Text Navigation Skin

Last updated on

Product:

WonderPlugin Slider

Question:

I just purchased the wonder plugin slider. It's great but I just have one question.

I am using the 'wordpress slider with text navigation' option. I was wondering if there was a way of changing that background red colour and the dark grey to my custom colours?

https://www.wonderplugin.com/wordpress-slider/examples/wordpress-slider-with-text-navigation-id33/

I have inspected the code and there doesn't seem to be a class I can associate a colour with.

Would really appreciate your help!

Answer:

In the plugin, step 3, Options tab, Advanced Options, you can enter the following text to the Data Options field:

data-navbordercolor="#dfdfdf"
data-navborderhighlightcolor="#a8162b"
data-navthumbtitlecss="display:block;position:relative;padding:14px;text-align:center;font-size:12px; text-transform:uppercase;color:#231f20;"
data-navthumbtitlehovercss="color:#fff;"
data-navshowfeaturedarrow="false"
data-timercolor="#dfdfdf"

The 1st line data-navbordercolor will change the background color of the thumbnail navigations.
The 2nd line data-navborderhighlightcolor will change the highlight color.
The 3rd line data-navthumbtitlecss can be used to change text size and format.
The 4th line data-navthumbtitlehovercss is to change to the text color of highlighted tabs
The 5th line data-navshowfeaturedarrow is to hide the red arrow.
The 6th line data-timercolor is to change the color of the bottom progress line.

The demo is as following: