bootstrap 3.1.1 轮播控件不起作用

Question

我正在使用 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。 有什么建议吗？

Answer 1

<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"

Answer 2

您的控件在 div#slideshow 之外，删除控件 html 代码之前的 </div>

Answer 3

您在“Carousel Nav”评论之前有一个标签“</div>”无用：

引导层：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>