Disable rendering of objects on mobile/above certain screen resolution

Question

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!

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.