Bootstrap3 产品轮播无法正常工作

Question

我在 here 上发现的 Bootstrap3 Carousel 中有一些问题
我正在使用 Bootstrap3，我的输出一次只有一张图像。

Html

    <div class="container img-responsive" style="background: #d9e5e9;
 padding-left: -0px; padding-bottom: 10px; padding-top: 10px; margin: 20px auto; width: 980px;">
    <div class="carousel slide" id="myCarousel">
    <div class="carousel-inner">
    <div class="item active">
    <div class="col-xs-3">
    <a href="#"><img src="~/images/contact.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
    <div class="col-xs-3">
    <a href="#"><img src="~/images/contact1.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
    <div class="col-xs-3">
    <a href="#"><img src="~/images/contact2.png" class="img-responsive"></a></div>
    </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
<i class="glyphicon glyphicon-chevron-left">
    </i></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
    </div>

脚本和样式

<style>
    .carousel-inner .active.left {
        left: -25%;
    }

    .carousel-inner .next {
        left: 25%;
    }

    .carousel-inner .prev {
        left: -25%;
    }

    .carousel-control {
        width: 4%;
    }

        .carousel-control.left, .carousel-control.right {
            margin-left: 15px;
            background-color: #036ca6;
        }
</style>
   <script>
        $(document).ready(function () {
            $('#myCarousel').carousel({
                interval: 4000
            })

            $('.carousel .item').each(function () {
                var next = $(this).next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo($(this));

                for (var i = 0; i < 2; i++) {
                    next = next.next();
                    if (!next.length) {
                        next = $(this).siblings(':first');
                    }

                    next.children(':first-child').clone().appendTo($(this));
                }
            });
        });
    </script>

问题只是它一次显示一张图像，但它应该显示 4 张图像。
我做错了什么？

Answer 1

首先，我会检查以确保您已正确包含运行 bootstrap 所需的所有必要脚本和样式表。这应该至少包括一个 <link rel="stylesheet" href="boostrap.css"> 和一个 <script type="text/javascript" src="bootstrap.js"></script>。如果您不想将它们存储在本地，我已经链接到下面的 CDN。

如果这不是问题，请查看您的 for 循环并确保将其设置为运行的次数足以追加所有子项。现在，它只会运行两次。

最后，检查您的 html。你说你想显示四张图片，但你只包含了三张。

Bootstrap CSS & JS CDN: http://www.bootstrapcdn.com/

jQuery CDN（你可能也想要这个）：http://code.jquery.com

Bootstrap3 产品轮播无法正常工作

Bootstrap3 Product Carousel not working properly

jquery

twitter-bootstrap

twitter-bootstrap-3