Bootstrap Carousel 不向左环绕答案

【问题标题】：Bootstrap Carousel not wrapping leftBootstrap Carousel 不向左环绕
【发布时间】：2015-07-19 05:50:38
【问题描述】：

Bootstrap 轮播按预期工作，只是在单击左箭头时它不会从第一张幻灯片转到最后一张幻灯片。除了在第一张幻灯片上，左箭头完美地工作，然后旋转木马消失了。

$(document).ready(function() {
    $('#myCarousel').carousel({
        interval: false,
    });
});

<div class="row">
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <!-- Indicators -->
                <ul class="carousel-indicators">
                    <li data-target="#myCarousel" class="active"></li>
                    <li data-target="#myCarousel"></li>
                    <li data-target="#myCarousel"></li>
                    <li data-target="#myCarousel"></li>
                </ul>

                <!-- Slide 0 -->
                <div class="item active">
                    <img src="carousel0.jpg">
                    <div class="carousel-caption">
                        <h3>Image 0</h3>
                        <p>Image 0 Description</p>
                    </div>
                </div>
                <!-- Slide 1 -->
                <div class="item">
                    <img src="carousel1.jpg">
                    <div class="carousel-caption">
                        <h3>Image 1</h3>
                        <p>Image 1 Description</p>
                    </div>
                </div>
                <!-- Slide 2 -->
                <div class="item">
                    <img src="carousel2.jpg">
                    <div class="carousel-caption">
                        <h3>Image 2</h3>
                        <p>Image 2 Description</p>
                    </div>
                </div>
                <!-- Slide 3 -->
                <div class="item">
                    <img src="carousel3.jpg">
                    <div class="carousel-caption">
                        <h3>Image 3</h3>
                        <p>Image 3 Description</p>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

提琴手：https://jsfiddle.net/z4b2bwg6/7/

【问题讨论】：

标签： javascript jquery html twitter-bootstrap carousel

【解决方案1】：

你试过没有interval:false吗？

interval：自动循环一个项目之间的延迟时间。如果为 false，carousel 将不会自动循环。

另外，wrap 是否设置为 true？

wrap：旋转木马应该连续循环还是硬停止。

【讨论】：

好的，我去掉了逗号并添加了 'wrap: true' 但它仍然不起作用。什么会导致轮播向右而不向左转？

【解决方案2】：

检查并删除 js 脚本中多余的逗号 -

$(document).ready(function() {
    $('#myCarousel').carousel({
        interval: false
    });
});

然后记得把jquery代码放在html代码下面进行carousal。

这样做后它对我有用。

查看演示 - Code and demo of carousal

如果还是不行，肯定是有其他问题，可能是恶意 javascript 代码或未关闭的 div 标签。

【讨论】：