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?

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?

• javascript
• html
• twitter-bootstrap
• twitter-bootstrap-3
• carousel

3 Answers 3

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

Your controls are outside the div#slideshow, remove the </div> just before the controls html code

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

Bootply : http://www.bootply./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>