I have two sliders (Revolution Slider on WordPress), one for desktop and one for mobile. The desktop slider is currently set to disable completely on browsers below 1199px. This is a Revolution Slider setting and I've configured the slider like this so that mobile devices don't have to load images and assets from both sliders.

However, no such setting exists to stop the mobile slider and all its assets loading on desktop browsers.

I have hidden the mobile slider from view on desktop browsers using CSS and media queries however all the images are still loading.

Is there any way, using PHP, Javascrip or otherwise, to disable the rendering of this slider on browsers above 1199px?

Happy to supply more info if necessary!

I have two sliders (Revolution Slider on WordPress), one for desktop and one for mobile. The desktop slider is currently set to disable completely on browsers below 1199px. This is a Revolution Slider setting and I've configured the slider like this so that mobile devices don't have to load images and assets from both sliders.

However, no such setting exists to stop the mobile slider and all its assets loading on desktop browsers.

I have hidden the mobile slider from view on desktop browsers using CSS and media queries however all the images are still loading.

Is there any way, using PHP, Javascrip or otherwise, to disable the rendering of this slider on browsers above 1199px?

Happy to supply more info if necessary!

• mobile
• responsive

• Keep in mind visitors can resize their browsers, and if they've already gotten one version via PHP then they won't see an updated one. A much, much better solution would be to include a single slider and use CSS to adjust how it looks depending on the size. – WebElaine Commented Oct 10, 2019 at 15:25

1 Answer 1

PHP: One thing to consider here would be when the user increases and decreases the page width, if only one slider is built on page load then they wouldn't be able to then load the other slider if they change the width of the page.

JS: You can amend the image src using JS, having your images named the same and adding removing the extention to the image on width adjustment. e.g. image.png then adding and removing (image)-mobile.png.

CSS: You can use background images or image tags then swap the src with css using media queries. Background images are easy enough to declare, and image tag src's can be swapped like this:

<style>
    @media screen and (min-width: 1248px) {
        .MyClass123{
            content:url("image-1.jpg");
        }
    }

    @media screen and (max-width: 1247px) {
        .MyClass123{
            content:url("image-2.jpg");
        }
    }
</style>

<img class="MyClass123"/>

The simplest and most likely most reliable and easy to keep updated would be the CSS avenue.

Take your pic of which, then we can look to write you up a solution, Jason.