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

问题

I know that there is a responsive feature for revolution-slider, 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.

What's the best solution for this?

回答1:

It depends on how you are setting your revslider 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 revslider 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:

WP codex wp_is_mobile
WP codex do_shortcode
Shortcode Generator

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

回答3:

echo do_shortcode($output); // works for me

来源：https://stackoverflow.com/questions/37666445/how-to-load-a-specific-slider-revolution-for-mobile-only

标签

javascript

php

wordpress

responsive

revolution-slider