Question

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

    <!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类，但您将其包装到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

位置与轮播指标不一致

1 个答案: