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％，因此它不会在右侧留下任何空白区域。

总之，滑块正在工作。但是.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);
}

这样可以解决问题吗？干杯

Answer 2

.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.

BxSlider正在工作，但div内部有一个空格

2 个答案: