bootstrap 3.1.1轮播控件不起作用

时间:2014-11-19 09:06:21

标签: javascript html twitter-bootstrap twitter-bootstrap-3 carousel

我正在使用Bootstrap建立一个网站,但我无法让旋转木马工作,左右和指示符都会改变幻灯片。

<div id="slideshow" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#slide0" data-slide-to="0" class="active"></li>
        <li data-target="#slide1" data-slide-to="1"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <!-- 1st slide -->
        <div class="item active" id="slide0">
            <div id="mainFeature">
                    <div class="col-lg-6 col-lg-offset-1 col-md-6" >
                        <img class="screenshot">
                    </div>
                    <div class="col-lg-4 alta"> 
                        <h2>heading</h2>
                            <p class="lefted">some text</p>
                            <p class="lefted">other text</p>
                    </div>
            </div>
        </div>
        <!-- second slide -->
        <div class="item" id="slide1">
            <div id="mainFeature">
                    <div class="col-lg-6 col-lg-offset-1 col-md-6" >
                        <img class="screenshot">
                    </div>
                    <div class="col-lg-4 alta"> 
                        <h2>heading</h2>
                            <p class="lefted">some text</p>
                            <p class="lefted">other text</p>
                    </div>
            </div>
        </div>
    </div>

    <!-- Carousel nav -->
    <a class="carousel-control left" href="#slideshow" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#slideshow" data-slide="next">&rsaquo;</a>
</div>

这是html标记,轮播显示正确,幻灯片显示自动生效,但我无法转到下一张/上一张幻灯片。

我试图包含这个脚本:

$('.carousel').carousel({
    interval: 3000
 })
$('.carousel-control.left').click(function() {
   $('#slide').carousel('prev');
});

$('.carousel-control.right').click(function() {
   $('#slide').carousel('next');
});

仍然没有运气,是的bootstrap.js链接到HTML。 有什么建议吗?

3 个答案:

答案 0 :(得分:5)

<ol class="carousel-indicators">
        <li data-target="#slide0" data-slide-to="0" class="active"></li>
        <li data-target="#slide1" data-slide-to="1"></li>
    </ol>

指标不起作用,因为数据目标是轮播的ID而不是幻灯片。

data-target="#slideshow"

答案 1 :(得分:1)

您的控件位于div#幻灯片显示之外,在控件html代码之前移除</div>

答案 2 :(得分:1)

在“</div>”评论之前,您有一个标记“Carousel Nav”unusefull:

Bootply http://www.bootply.com/zqAmnp3ekY

代码

<div id="slideshow" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#slide0" data-slide-to="0" class="active"></li>
        <li data-target="#slide1" data-slide-to="1"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <!-- 1st slide -->
        <div class="item active" id="slide0">
            <div id="mainFeature">
                    <div class="col-lg-6 col-lg-offset-1 col-md-6">
                        <img class="screenshot">
                    </div>
                    <div class="col-lg-4 alta"> 
                        <h2>heading</h2>
                            <p class="lefted">some text</p>
                            <p class="lefted">other text</p>
                    </div>
            </div>
        </div>
        <!-- second slide -->
        <div class="item" id="slide1">
            <div id="mainFeature">
                    <div class="col-lg-6 col-lg-offset-1 col-md-6">
                        <img class="screenshot">
                    </div>
                    <div class="col-lg-4 alta"> 
                        <h2>heading</h2>
                            <p class="lefted">some text</p>
                            <p class="lefted">other text</p>
                    </div>
            </div>
        </div>
    </div>
   <!-- </div>  COMMENT THIS LINE-->  
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#slideshow" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#slideshow" data-slide="next">›</a>
</div>