Bootstrap Carousel指示器不按正确顺序循环

jautem 发布于 2019-03-09 carousel 最后更新 2019-03-09 14:41 0 浏览

我试图让twitter bootstrap旋转木马工作,现在一切工作正常,除非指标不能正常工作,当我按下下箭头时指标直接跳到第三个而不是第二个,而当我单击prev-arrow图像完全消失,问题出在哪里?我究竟做错了什么? 在我的情况下,我得到了一个位于滑块顶部的div z-index,以实现块不移动的效果。为了更好地理解,请亲自看看: 这是我的例子:http://jsfiddle.net/jRa5r/2/ 这里是HTML,跟随jsfiddle完整的例子和其他代码。

<div id="myCarousel" class="carousel slide"> <!-- slider -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="caption-block"></div>
                <div class="active item"> <!-- item 1 -->
                    <img src="img/slider1.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>A team with long experience in Domestic and International relationships with key sector decision-makers.</h4>
                    </div>
                </div> <!-- end item -->
                <div class="item"> <!-- item 2 -->
                    <img src="img/slider1.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>Title</h4>
                        <p>Mollitia officia reiciendis excepturi temporibus quibusdam.</p>
                    </div>
                </div> <!-- end item -->
                <div class="item"> <!-- item 3 -->
                    <img src="img/slider1.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>Title</h4>
                        <p>Quibusdam blanditiis.</p>
                    </div>
                </div> <!-- end item -->
            </div> <!-- end carousel inner -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div> <!-- end slider -->
已邀请:

wet

赞同来自:

带上你的

<div class="caption-block"></div>
在......之外
<div class="carousel-inner"></div>
您需要重新设置标题块。 Bootstrap认为你的标题可能是一个项目? 更新小提琴: http://jsfiddle.net/jRa5r/10/ 189px为“caption-block”div的新高度是我发现匹配容器。 希望这可以帮助!