image.png

需要carousel.js:Bootstrap: carousel.js v3.0.2

设置属性 data-target data-slide-to carousel slide carousel-indicators carousel-inner

        <div id="homepage-feature" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
                <li data-target="#homepage-feature" data-slide-to="1"></li>
                <li data-target="#homepage-feature" data-slide-to="2"></li>
                <li data-target="#homepage-feature" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/okwu.jpg" alt="OKWU.edu Homepage">
                </div>
                <div class="item">
                    <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
                </div>
                <div class="item">
                    <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation">
                </div>
                <div class="item">
                    <img src="img/emancipation.jpg" alt="Emancipation Stories">
                </div>
            </div><!-- /.carousel-inner -->

            <!-- Controls -->
            <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
                <span class="icon fa fa-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#homepage-feature" data-slide="next">
                <span class="icon fa fa-chevron-right"></span>
            </a>
        </div><!-- /#homepage-feature.carousel -->

设置轮播间隔:

('.carousel').carousel({
interval: 8000 // 8 seconds vs. default 5
});
});