Bootstrap Carousel不会工作。也许我错过了什么?

时间:2015-07-23 19:13:07

标签: jquery html css twitter-bootstrap

所以我试图让这个旋转木马在我的标题中运行,但目前它根本不想工作。我无法点击它,也不会自动浏览幻灯片。标签在点击后甚至不会响应。

HTML:

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

            <!-- Wrapper for slides  -->
            <div class="carousel-inner" >
                <div class="item active">
                    <img src="images/IMG_8821_ext_opt.jpg" alt="slider-image-1">
                </div>
                <div class="item">
                    <img src="images/2V1C8599.jpg" alt="slider-image-2">
                </div>
                <div class="item">
                    <img src="images/IMG_4519_.jpg" alt="slider-image-3">
                </div>
            </div>

            <!-- Controls  -->
            <a class="left carousel-control" href="#home-carousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#home-carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
</header>

CSS:

header { height: 80vh }
.carousel { height: 80vh; z-index: -1; }
.header-carousel .carousel-indicators { bottom: 25px; }

我有什么遗失的吗?

2 个答案:

答案 0 :(得分:1)

没关系。

该剧本未包含在内。发生了一些事情,我不小心删除了这条线,或者认为我已经把它包括在内......

DERP。

谢谢,@richerlariviere

答案 1 :(得分:0)

这是一些简单的javascript(jQuery)代码,可以帮助你:

cnt=0;
setInterval(function(){
    $('.item').removeClass('active');
    $('.item').eq(cnt).addClass('active');
    cnt++;
    if (cnt>2) cnt=0;
},1500);

jsFiddle Demo