Question

我无法让幻灯片自动滚动浏览所有照片。它滚动三张图片，但我有六张。当我单击箭头时，它会滚动浏览所有图片，但不会自动滚动浏览所有图片。当网站不在线时，它可以正常工作，但在Chrome网站上线时，它无法在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>

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开始）

Bootstrap Carousel幻灯片不会滚动超过三张幻灯片

1 个答案: