jquery - Bx Slider 第二张幻灯片未在移动设备上显示

Question

我的 bx slider 有问题。它在台式机上运行良好，甚至在您将桌面屏幕尺寸缩小时也能正常运行。但是当您使用移动设备时，第二张幻灯片图像会消失。

该站点当前位于此处: http://mistleymanor.com/

我的 html 是:

<ul class="bxslider">
<li><img src="<?php echo get_template_directory_uri(); ?>/images/penthouse-bedroom.jpg" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/images/reception1.jpg" /></li>
</ul>

<!--BX Slider Plugin-->
        <script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.bxslider.js"></script>
        <script type="text/javascript">
                $('.bxslider').bxSlider({
            infiniteLoop: true,
            auto: ($(".bxslider li").length > 1) ? true: false,
            pager: ($(".bxslider li").length > 1) ? true: false,
            controls: false
        });

        </script>

我不确定发生了什么，如果有人能提供帮助那就太好了。

李

Answer 1

我能够通过在 Nexus 5 上设置的 Chrome 设备模拟器重现此问题。移动设备上的空白幻灯片似乎包含宽度和高度设置为 0 的图像标签。

<img src="http://mistleymanor.com/wp-content/themes/Mistley-Manor/images/reception1@2x.jpg" width="0" height="0">