Question

我正在测试Nivo，我得到这种奇怪的行为，在最后一张图像之后出现一张空白幻灯片，就像一张空白图片一段时间而不是重新开始（正常）。在最后一张幻灯片之后，它并不是随机的。我正在使用Twitter Bootstrap和jQuery 1.7.1，代码是：

                <div class="slider-wrapper theme-default"><div class="ribbon"></div>
                    <div id="nivoslider" class="nivoSlider" style="width:743px;height:295px;overflow: hidden">

                        <a href="#"><img src="images/nivo/banner740-optz.png" title="#teste1" alt="" /></a>
                        <a href="#"><img src="images/nivo/nemo.jpg" title="#teste2" alt="" /></a>
                        <a href="#"><img src="images/nivo/toystory.jpg" title="#teste3" alt="" /></a>
                        <a href="#"><img src="images/nivo/walle.jpg" title="#teste4" alt="" /></a>
                        <a href="#"><img src="images/nivo/up.jpg" title="#teste5" alt="" /></a>

                        <div id="teste1" class="nivo-html-caption">
                            <h4>Some Title</h4>
                            <p>Some paragraph</p>
                        </div>
                        <div id="teste2" class="nivo-html-caption">
                            <h4>Some Title</h4>
                            <p>Some paragraph</p>
                        </div>
                        <div id="teste3" class="nivo-html-caption">
                            <h4>Some Title</h4>
                            <p>Some paragraph</p>
                        </div>
                        <div id="teste4" class="nivo-html-caption">
                            <h4>Some Title</h4>
                            <p>Some paragraph</p>
                        </div>
                        <div id="teste5" class="nivo-html-caption">
                            <h4>Some Title</h4>
                            <p>Some paragraph</p>
                        </div>

                    </div>

                </div>

Answer 1

好的 - 在我看来，所有标题应该在#nivoSlider div之外。我在http://jsfiddle.net/bv4yX/10/的示例中将它们移动了下来，现在似乎工作正常。

Answer 2

我的nivoslider也有带bootstrap的bug。我的解决方案在 nivoslider.css ，.nivoSlider img：

.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    /*bug fix bellow*/
    vertical-align: baseline !important;
    max-width: none !important;
}

Nivo Slider奇怪的行为：最后一张图片后的空白幻灯片

2 个答案: