bootstrap 3.1.1轮播控件不起作用

Question

I'm building a website using Bootstrap but I can't make the carousel work at all, the left and right nor the indicator will change the slide.

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

this is the html markup, the carousel is displayed corretly and the slideshow work automatically but I can't go to the next/prev slide.

I tried to include this script:

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

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

still no luck, and yes bootstrap.js is linked to the html. Any advice?

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>

The indicators are not working cause the data-target is the id of carousel not slide.

data-target="#slideshow"

Answer 2

您的控件位于div＃slideshow之外，请删除</div> ，使其位于控件html代码之前

Answer 3

You have a tag ' </div> ' unusefull just before ' Carousel Nav ' comment :

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

Code :

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