wordpress 移动滑块上的革命滑块更改背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32765871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Revolution slider change background image on mobile
提问by Brad Hazelnut
I have a site which works perfect with rev slider when browsing with a desktop. But when browsing to it from mobile, the slider images don't display correctly or they are cut off. Is there a way to either switch the images within the slider when mobile browsers come to site or what can i do for mobile? I tried switching with css but that didn't work. Not sure what else can be done. Any help would be very much appreciated.
我有一个网站，当使用桌面浏览时，它与 rev 滑块完美配合。但是当从手机浏览到它时，滑块图像无法正确显示或被截断。有没有办法在移动浏览器访问网站时切换滑块内的图像，或者我可以为移动设备做什么？我尝试用 css 切换，但这没有用。不知道还能做什么。任何帮助将不胜感激。
回答by BryanOfEarth
Initially, I didn't think you could. But, it turns out that you can! You just have to make two sliders, then cleverly hide one or the other.
一开始，我不认为你可以。但是，事实证明你可以！您只需要制作两个滑块，然后巧妙地隐藏其中一个即可。
If it's just a matter of the picture dimensions, you can give each slider size a custom size. I have done this to accommodate not being able to read text on the slides when viewing on mobile. By stretching the height of the mobile version, I can now read the text on the images and, thus, problem solved.
如果只是图片尺寸的问题，您可以为每个滑块尺寸指定自定义尺寸。我这样做是为了适应在移动设备上查看时无法阅读幻灯片上的文本。通过拉伸移动版本的高度，我现在可以阅读图像上的文字，从而解决了问题。
You can also just disable the slider when viewing on mobile, like this.
您也可以在移动设备上查看时禁用滑块，如下所示。
回答by Jskillzz
I've searched endlessly for the answer to this, and finally figured it out. The hiding option is no good if your theme is only calling one Slider per page.
我一直在无休止地寻找这个问题的答案，终于弄明白了。如果您的主题每页仅调用一个 Slider，则隐藏选项不好。
1) Install the Mobile Detect plugin.
1) 安装移动侦测插件。
2) Find where the Slider is being called in your theme. For me it was in THEME/inc/template-hooks.php
2) 找到在您的主题中调用 Slider 的位置。对我来说是在 THEME/inc/template-hooks.php
3) Find this code there:
3）在那里找到这个代码：
echo '<div id="main-slideshow">';
putRevSlider($rev_slider);
echo '</div>';
4) Replace this with:
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!!!!
急速！！！！
回答by Saulius Vikerta
In the case where several sliders are initiated in the page, if you try to optimize for performance, Revslider still will load all background pictures, despite sliders will be hidden or visible. So this hiding solution helps only for visual improvements.
在页面中启动了多个滑块的情况下，如果您尝试优化性能，尽管滑块将隐藏或可见，Revslider 仍会加载所有背景图片。因此，此隐藏解决方案仅有助于视觉改进。
回答by SG52
If your tempalte is using visual composer :
如果您的模板使用的是视觉作曲家：
Add Array-Variable to 2 functions in the file (plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php) :
将 Array-Variable 添加到文件 (plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php) 中的 2 个函数：
addShortcodeSettings & mapShortcode :
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' ),
)
Now you can set 2 different sliders in backend-editor.
现在您可以在后端编辑器中设置 2 个不同的滑块。
At least put mobile detection from answer of "Jskillzz" to the file (plugins/js_composer/include/templates/shortcodes/rev_slider_vc.php) :
至少将“Jskillzz”答案中的移动检测放入文件（plugins/js_composer/include/templates/shortcodes/rev_slider_vc.php）：
Change from :
更改自：
$output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $alias . ']' ) );
To :
到 ：
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;
PASTA!
意大利面条！
EDIT:Slides without Mobile Settings produce strange error, so we put 1 more option (checkbox) for set different mobile slide to false as default, like this :
编辑：没有移动设置的幻灯片会产生奇怪的错误，所以我们再添加 1 个选项（复选框）来将不同的移动幻灯片设置为默认值，如下所示：
Add 1 More Variable in the 2 functions in (plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php) :
在 (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' ),
),
And in (plugins/js_composer/include/templates/shortcodes/rev_slider_vc.php) :
在 (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 . ']' ) );
}
Then is look like this, we can set mobile view function to true :
然后看起来像这样，我们可以将移动视图功能设置为 true ：
