位置与轮播指示器不一致

Question

我正在使用此代码创建一个包含 4 个的基本轮播滑块 items.When 我转到下一张幻灯片时效果很好，但是当我通过轮播指示器导航到第一张幻灯片时，轮播指示器的位置变得不一致。

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div id="imageCarousel" class="carousel slide"  data-interval="2000">
                    <div class="carousel-indicators">
                        <ol>
                            <li data-target="#imageCarousel" data-slide-to="0" class="active" ></li>
                            <li data-target="#imageCarousel" data-slide-to="1" ></li>
                            <li data-target="#imageCarousel" data-slide-to="2" ></li>
                            <li data-target="#imageCarousel" data-slide-to="3" ></li>

                        </ol>
                    </div>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="Images/img1.jpg" class="img-responsive" />
                            <div class="carousel-caption">
                                <h3>Image 1</h3>
                                <p>This is the description for Image1</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/img2.jpg" class="img-responsive" />
                            <div class="carousel-caption">
                                <h3>Image 2</h3>
                                <p>This is the description for Image2</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/img3.jpg" class="img-responsive" />
                            <div class="carousel-caption">
                                <h3>Image 3</h3>
                                <p>This is the description for Image3</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/img4.jpg" class="img-responsive" />
                            <div class="carousel-caption">
                                <h3>Image 4</h3>
                                <p>This is the description for Image4</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $(imageCarousel).carousel();
        });
    </script>

</body>
</html>

这是页面加载时的第一张幻灯片。当我转到下一张幻灯片时效果很好。

但是当我导航到第一张幻灯片时，我遇到了轮播位置不一致的情况，这是第二张快照。

我该如何解决这个问题？

Answer 1

您确定正确初始化轮播吗？

$(document).ready(function () {
        $('#imageCarousel').carousel();
    });

我发现了问题，您的标记有误。 ol 必须有 carousel-indicators class 但是你把它换成 div。正确的标记是：

<ol class="carousel-indicators">

                            <li data-target="#imageCarousel" data-slide-to="0" class="active" ></li>
                            <li data-target="#imageCarousel" data-slide-to="1" ></li>
                            <li data-target="#imageCarousel" data-slide-to="2" ></li>
                            <li data-target="#imageCarousel" data-slide-to="3" ></li>

                        </ol>

查看此处了解更多详情： https://getbootstrap.com/javascript/#carousel

这就是工作jsfiddle

位置与轮播指示器不一致

position inconsistency with carousel indicators

html

javascript

carousel

twitter-bootstrap