How to load a specific Slider Revolution for mobile-only?

I know that there is a responsive feature for , but unfortunately it still loads all the mobile assets on desktop and vice versa, adding time to the page-load.

So I’d prefer to have 2 distinct sliders, one per device.

Read More

What’s the best solution for this?

Related posts

Leave a Reply

3 comments

  1. It depends on how you are setting your in your pages.

    I think that the best way to achieve what you really want (need) is using php with conditional rules:

    1) In your templates with conditional based on mobile detection. This way you will avoid loading 2 at the same time.

    You could use wp_is_mobile() conditional wordpress function for this purpose:

    <?php
        if ( !wp_is_mobile() ) {
            echo do_shortcode('[rev_slider alias="my_desktop_slider"]');
        } 
        else
        {
            // mobile devices
            echo do_shortcode('[rev_slider alias="my_mobile_slider"]');
        }
    ?>
    

    2) In a custom shortcode with that conditional:

    if( !function_exists('rev_slider_detection') ) {
    
        function rev_slider_detection( $atts ) {
    
            extract(shortcode_atts(array(
                'alias' => '' // the alias name of your desktop rev-slider
            ), $atts));
    
            $output = '[rev_slider alias="';
    
            if ( !wp_is_mobile() ) {
                // For desktop only
                $output .= $alias . '"]';
            } else {
                // For mobile only
                $output .= $alias . '_mob"]';
            }
    
            return $output;
            // or (because untested)
            // return do_shortcode('" . $output . "');
        }
    
        add_shortcode('my_rev', 'rev_slider_detection');
    }
    

    You will use it this way: [my_rev alias="my_revslider_alias_slug"] and you will need to have 2 instance of a rev slider, the first one for desktop with some alias name ( home for example) and the second one for mobile with same alias name + “_mob” ( home_mob for example).

    Reference:

    You can also elaborate a more accurate script to detect tablets and phones, then use it as a conditional for different devices types.

  2. This is worked for me. You need just one [short code] for normal/desktop version, _mob version will be automatically chosen.

    if( !function_exists('rev_slider_detection') ) {
    
        function rev_slider_detection( $atts ) {
    
            extract(shortcode_atts(array(
                'alias' => ''
            ), $atts));
    
            $output = '[rev_slider alias="';
    
            if ( !wp_is_mobile() ) {
                // For desktop only
                $output .= $alias . '"]';
            } else {
                // For mobile only
                $output .= $alias . '_mob"]';
            }
    
            return do_shortcode($output);
            // or (try this if not working)
            // return $output;
        }
    
        add_shortcode('my_rev', 'rev_slider_detection');
    }