引导轮播指示器未按正确顺序循环答案

【问题标题】：Bootstrap Carousel indicators not cycling in correct order引导轮播指示器未按正确顺序循环
【发布时间】：2013-04-03 23:23:50
【问题描述】：

我试图让 twitter 引导轮播工作，现在一切正常，除了指标工作不正常，当我按下下一个箭头时，指标直接跳到第三个而不是第二个，当我通过单击上一个箭头返回时，图像完全消失了，问题出在哪里？我做错了什么？

在我的例子中，我在滑块顶部放置了一个 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 -->

【问题讨论】：

标签： javascript twitter-bootstrap carousel

【解决方案1】：

拿走你的

<div class="caption-block"></div>

出

<div class="carousel-inner"></div>

不过，您需要重新设置标题块的样式。 Bootstrap 认为您的标题可能是一个项目？

更新小提琴：

http://jsfiddle.net/jRa5r/10/

“标题块” div 的新高度为 189 像素，这是我发现的与容器匹配的高度。希望这会有所帮助！

【讨论】：