Bootstrap轮播幻灯片不能滚动超过三张幻灯片

Question

我无法让我的幻灯片自动滚动所有图片。它只能滚动三张图片，但我有六张图片。当我点击箭头时，它可以滚动所有的图片，但是它不能自动滚动所有图片。它在网站没有上线的时候可以正常工作，但在Chrome浏览器中上线后就无法工作了。这是我的代码...

    <div id="carousel-example-generic" class="carousel-inner" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">

            <div class="item active">
                <img src="img/landscape.jpg" alt="landscape design and installation">
                <div class="carousel-caption"></div>
                </div>      

            <div class="item">
                <img src="img/patio.jpg" alt="stonework">
            <div class="carousel-caption"></div>    
            </div>  

        <div class="item">
        <img src="img/patio2.jpg" alt="full-service">
        <div class="carousel-caption"></div>
    </div>  

    <div class="item">
        <img src="img/firepit.png" alt="Fire Pit">
        <div class="carousel-caption"></div>
    </div>  

    <div class="item">
        <img src="img/deck.png" alt="deck">
        <div class="carousel-caption"></div>
    </div>  

    <div class="item">
        <img src="img/gardens.png" alt="deck">
        <div class="carousel-caption"></div>
    </div>      

    </div>  

    <!-- Controls -->

        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span></a>

        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>

- user3403529

---

请提供 Fiddle。 - Mo.

Answer 1

您需要添加更多的数据目标：

<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>

由于您有6个幻灯片，因此您需要有6个数据目标（从0开始）

- moodyjive