javascript - BxSlider 正在运行，但 div 中有一个空白区域

Question

我的 bxslider 完全没问题，但我不确定为什么图像后右侧有一个空白区域。

首先，我导入了 jquery 库文件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/bxslider/jquery.bxslider.min.js"></script>
<script src="js/bxslider/jquery.bxslider.js"></script>
<link rel="stylesheet" href="js/bxslider/jquery.bxslider.css" />

其次，我为.bxslider 放置了一个脚本。以下代码如下:

$(document).ready(function(){
    $('.bxslider').bxSlider({
        auto: true,
        controls:false
    });
});

第三，我在 HTML 中添加了如下代码:

<div id="home-top-left">
    <ul class="bxslider">
        <li><img src="pic1.jpg" /></li>
        <li><img src="pic2.jpg" /></li>
        <li><img src="pic3.jpg" /></li>
        <li><img src="pic4.jpg" /></li>
    </ul>
</div>

最后，在 CSS 中。我只是把这样的东西放在下面:

.bxslider img {
width:100%;
}

图像分辨率为 2000x1000。我试图让图像宽度变成 100% 这样它就不会在右侧留下任何空白区域。

总之， slider 正在运行。但是在.bxslider 里面右侧有一个空白区域。有任何想法吗？我试图检查元素并进行调试，但我无法弄清楚。

这里是 JSFIDDLE .谢谢!

Answer 1

几天前遇到这个问题:在 bxslider.css 文件的第 32 行:

.bx-wrapper .bx-viewport {
    // DELETE FROM HERE
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc; 
    border:  5px solid #fff; 
    left: -5px;      
    background: #fff;
    // TO HERE

    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
}

这能解决问题吗？干杯