Question

我尝试使用html中的.carousel脚本编辑滑块的间隔，但它似乎无法正常工作。我也试图编辑旋转木马来实现这样的目标：

但我似乎无法找到要编辑的内容以及使用它编辑的内容。

此处的代码

<div class="text-center container-final">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="border-radius:25px !important; overflow:hidden !important; background-color:#2a2a2a !important;">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" style="overflow:hidden; background-color:#2a2a2a;">
        <div class="item active" style="border:3px solid #d9534f; border-radius:25px; overflow:hidden; background-color:#2a2a2a;">
            <img src="images/img001.jpg" alt="Img1" class="img-responsive">
            <div class="carousel-caption">
                <a class="btn btn-game1">Game1</a>
            </div>
        </div>
        <div class="item" style="border:3px solid #5cb85c; border-radius:25px; overflow:hidden; background-color:#2a2a2a;">
            <img src="images/img002.jpg" alt="Img2" class="img-responsive">
            <div class="carousel-caption">
                <a class="btn btn-game2">Game2</a>
            </div>
        </div>
        <div class="item" style="border:3px solid #f0ad4e; border-radius:25px; overflow:hidden; background-color:#2a2a2a;">
            <img src="images/img003.jpg" alt="Img3" class="img-responsive">
            <div class="carousel-caption">
                <a class="btn btn-game3">Game3</a>
            </div>
        </div>
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev" style=" overflow:hidden;">
        <span class="icon-prev">&lsaquo;</span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next" style=" overflow:hidden;">
        <span class="icon-next">&rsaquo;</span>
    </a>
</div>
</div>

$（＆＃39;＃myCarousel＆＃39）传送带（{。间隔：9000 }）;

Answer 1

设置滑块的间隔有两种方法，一种是

数据属性方法 :(在您的轮播幻灯片中提及数据间隔）

<div class="text-center container-final">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="9000">
--
--
</div>
</div>

其他方法是 javascript ：在HTML文件的末尾添加以下脚本：

<script>
    $('#myCarousel').carousel({
        interval: 9000
    })
</script>

无法编辑Bootstrap Carousel js

1 个答案: