革命滑块更改移动设备上的背景图像

Question

我有一个网站，在使用桌面浏览时与 rev 滑块完美配合。但是从移动设备浏览到它时，滑块图像无法正确显示或被截断。有没有办法在移动浏览器进入网站时切换滑块内的图像，或者我可以为移动设备做什么？我尝试用 css 切换，但没有奏效。不知道还能做什么。任何帮助将不胜感激。

Answer 1

因此，至少在第 6 版中，您可以通过添加带有背景图像的形状图层并根据屏幕尺寸隐藏/显示该图层来做到这一点。

1. 制作一个新的形状图层。
2. 转到图层选项中的“尺寸和位置”。
3. 将“尺寸预设”设置为 Cover。
4. 将“图层对齐”设置为场景。
5. 转到图层选项中的“可见性”。
6. 在您不希望显示的所有屏幕尺寸上隐藏图层。
7. 确保您的形状图层位于图层堆栈的底部。
8. 转到图层选项中的“样式”。
9. 选择背景图片。
10. 确保在“位置”部分中将其设置为覆盖。

应该这样做。希望对某人有所帮助。

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

Answer 2

最初，我认为你不能。但是，事实证明你可以！您只需要制作两个滑块，然后巧妙地隐藏其中一个即可。

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

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

Answer 3

我无休止地寻找这个问题的答案，终于弄明白了。如果您的主题每页只调用一个 Slider，则隐藏选项不好。

1) 安装 Mobile Detect 插件。

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 4

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

Answer 5

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

在文件 (plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php) 中添加 Array-Variable 到 2 个函数：

addShortcodeSettings & mapShortcode :

    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