Javascript BxSlider正在工作，但div中有一个空格

我的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" />

第三，我用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>

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

总之，滑块工作正常。但是在.bxslider的右侧有一个空格。有什么想法吗？我试着检查元素并进行调试，但我想不出来

---

这是。谢谢

几天前遇到了这个问题：在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);
}

这能解决问题吗？

---

干杯

你能拼出一个JSFIDLE吗？@Ohgodwhy更新了！：）您没有将bxslider插件添加到JSFIDLE:（@Stefan嘿，如果您能帮助我将bxslider插件添加到JSFIDLESS左侧的选项卡：JSFIDLE中的外部源，然后添加bxslider源，就像jquery source://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.jsWhy“这能解决问题吗？”一个好的答案总是会有一个解释，说明做了什么以及为什么这样做，不仅是为了OP，而且是为了SO的未来访客。为什么这样做：是问题本身。做了什么：代码本身。

.bxslider img {
width:100%;
}

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

.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);
}
will fix the issue.