Question

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

Answer 1

最初，我没想到你能做到。但事实证明你可以！你只需制作两个滑块，然后巧妙地隐藏其中一个。

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

您还可以在移动设备like this.

上查看时禁用滑块

Answer 2

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

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

那应该做到。希望能对某人有所帮助。

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

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

PRESTO !!!!

Answer 4

如果在页面中启动了多个滑块，如果您尝试优化性能，Revslider仍会加载所有背景图片，尽管滑块将被隐藏或可见。因此，这种隐藏解决方案仅对视觉改进有帮助。

Answer 5

如果你的tempalte使用的是视觉作曲家：

将Array-Variable添加到文件中的2个函数（plugins / js_composer / include / classes / vendors / plugins / class -vc-vendor-revslider.php）：

addShortcodeSettings＆amp; mapShortcode：

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

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

至少将移动检测从“Jskillzz”的回答放到文件中（plugins / js_composer / include / templates / shortcodes / rev_slider_vc.php）：

更改自：

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;

收件人：

        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' ),
        ),

PASTA！

编辑：没有移动设置的幻灯片会产生奇怪的错误，因此我们在默认情况下将另外一个选项（复选框）设置为不同的移动幻灯片为false，如下所示：

在（plugins / js_composer / include / classes / vendors / plugins / class-vc-vendor-revslider.php）的2个函数中添加1个变量：

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

在（plugins / js_composer / include / templates / shortcodes / rev_slider_vc.php）中：

{{1}}

然后看起来像这样，我们可以将移动视图功能设置为true：

Screenshot

革命滑块改变移动背景图像

5 个答案: