Revolution 滑块在移动设备上更改背景图片

Question

我有一个网站，在使用桌面浏览时与转速滑块完美配合。但是当从移动设备浏览时，滑块图像无法正确显示或被截断。有没有一种方法可以在移动浏览器访问网站时在滑块内切换图像，或者我可以为移动设备做什么？我尝试使用 css 进行切换，但没有用。不知道还能做什么。非常感谢任何帮助。

Answer 1

起初，我认为你做不到。但是，事实证明你可以！您只需要制作两个滑块，然后巧妙地隐藏一个或另一个。

如果只是图片尺寸的问题，您可以为每个滑块尺寸指定一个自定义尺寸。我这样做是为了适应在移动设备上查看时无法阅读幻灯片上的文本。通过拉伸移动版本的高度，我现在可以阅读图像上的文字，因此问题解决了。

您也可以在移动设备上查看时只禁用滑块，like this.

Answer 2

我一直在寻找这个问题的答案，终于想通了。如果您的主题每页只调用一个滑块，则隐藏选项不好。

1) 安装移动检测插件。

2) 在您的主题中找到调用 Slider 的位置。对我来说是 THEME/inc/template-hooks.php

3) 在那里找到这段代码：

echo '<div id="main-slideshow">';
putRevSlider($rev_slider);
echo '</div>';

4) 将其替换为：

echo '<div id="main-slideshow">';
if ( wp_is_mobile() ) :
putRevSlider("ALIAS OF MOBILE SLIDER HERE");
else :
putRevSlider("ALIAS OF DESKTOP SLIDER HERE");
endif;
echo '</div>';

急速!!!!

Answer 3

在页面中启动多个滑块的情况下，如果您尝试优化性能，尽管滑块会隐藏或可见，但 Revslider 仍会加载所有背景图片。因此，此隐藏解决方案仅有助于改善视觉效果。

Answer 4

如果您的模板使用的是视觉作曲家：

将数组变量添加到文件中的 2 个函数 (plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php) :

添加简码设置和地图简码：

    array(
    'type' => 'dropdown',
    'heading' => __( 'Revolution Slider (Mobile)', 'js_composer' ),
    'param_name' => 'aliasmob',
    'admin_label' => true,
    'value' => $revsliders,
    'save_always' => true,
    'description' => __( 'Select your Revolution Slider Mobile-View.', 'js_composer' ),
)

现在您可以在后端编辑器中设置 2 个不同的滑块。

至少将 "Jskillzz" 的答案中的移动检测放入文件 (plugins/js_composer/include/templates/shortcodes/rev_slider_vc.php) :

更改自：

$output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $alias . ']' ) );

收件人：

if ( wp_is_mobile() ) :
$output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $aliasmob . ']' ) );
else :
$output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $alias . ']' ) );
endif;

意大利面！

编辑： 没有移动设置的幻灯片会产生奇怪的错误，所以我们多放了 1 个选项（复选框）来将不同的移动幻灯片设置为 false 作为默认值，如下所示：

在 (plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php) 的 2 个函数中再添加 1 个变量 :

        array(
            'type' => 'checkbox',
            'heading' => __( 'Use a different mobile Slider?', 'js_composer' ),
            'param_name' => 'mobileslide',
            'admin_label' => true,
            'value' => false,
            'save_always' => true,
            'description' => __( 'Check if you want use Mobile Slider.', 'js_composer' ),
        ),

并且在 (plugins/js_composer/include/templates/shortcodes/rev_slider_vc.php) 中：

if ($mobileslide == true) {
    if ( wp_is_mobile() ) :
    $output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $aliasmob . ']' ) );
    else :
    $output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $alias . ']' ) );
    endif;
} else {
    $output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $alias . ']' ) );
}

然后是这样的，我们可以将移动视图功能设置为true：

Screenshot

Answer 5

因此，至少在第 6 版中，您可以通过添加带有背景图像的形状层和 hide/show 根据屏幕尺寸添加该层来实现此目的。

新建一个形状图层。
转到图层选项中的“大小和位置”。
将“尺寸预设”设置为覆盖。
将“图层对齐”设置为场景。
转到图层选项中的“可见性”。
在您不想显示的所有屏幕尺寸上隐藏图层。
确保您的形状图层位于图层堆栈的底部。
转到图层选项中的“样式”。
选择背景图片。
确保在“位置”部分将其设置为覆盖。

应该就可以了。希望对某人有所帮助。

您可能不得不对响应设置大惊小怪。如果您真的不了解这些设置的细微差别，我发现这个视频 (Slider Revolution 6.0 Responsive Settings) 非常有帮助。

Revolution 滑块在移动设备上更改背景图片

Revolution slider change background image on mobile

wordpress

revolution-slider