11

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

4

5 回答 5

13

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

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

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

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

于 2020-08-14T03:14:45.707 回答
10

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

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

您也可以在移动设备上查看时禁用滑块，就像这样。

于 2015-09-24T16:10:21.413 回答
0

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

1) 安装 Mobile Detect 插件。

2）找到在您的主题中调用滑块的位置。对我来说，它在 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>';

普雷斯托！！！！

于 2017-04-04T03:18:23.113 回答
0

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

于 2017-04-18T12:57:39.590 回答
0

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

将 Array-Variable 添加到文件 (plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php) 中的 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 ：

截屏

于 2017-12-14T08:12:15.627 回答