Bootstrap轮播不滑动也不显示文本

Question

i'm trying to use this small carousel i found on bootply, but i'm having some problems. First of all the carousel does not slide, so i can see only the first images and slides buttons don't work, second the text near photos is not visible, probably cause that the javascript function that displays it doesn't work.

This is my html code:

<div class="row-fluid" style="margin-top:10px; margin-left:10px;">
                  <div class="span9" id="slider">
                    <!-- Top part of the slider -->
                    <div class="row-fluid">
                      <div class="span2" id="carousel-bounding-box">
                        <div id="myCarousel" class="carousel slide">
                          <!-- Carousel items -->
                          <div class="carousel-inner">
                            <div class="active item" data-slide-number="0"><img src="http://lorempixel.com/120/100" style="border-radius:3px"></div>
                            <div class="item" data-slide-number="1"><img src="http://lorempixel.com/120/100/technics/1"style="border-radius:3px"></div>
                            <div class="item" data-slide-number="2"><img src="http://lorempixel.com/120/100/business/1"style="border-radius:3px"></div>
                            <div class="item" data-slide-number="3"><img src="http://lorempixel.com/120/100/city"style="border-radius:3px"></div>
                            <div class="item" data-slide-number="4"><img src="http://lorempixel.com/120/100/city/1"style="border-radius:3px"></div>
                            <div class="item" data-slide-number="5"><img src="http://lorempixel.com/120/100"style="border-radius:3px"></div>
                          </div>

                        </div>

                        <!-- Carousel nav -->
                        <div class="carousel-controls-mini">
                            <a href="#myCarousel" data-slide="prev">‹</a>
                            <a href="#myCarousel" data-slide="next">›</a>
                        </div>

                      </div>

                      <div class="span4" id="carousel-text"></div>
                      <div style="display:none;" id="slide-content">
                        <div id="slide-content-0">
                          <h5>Slide One</h5>
                          <p>This is mini slider / carousel with Bootstrap. Blah blah, blah, blah blah. Lorem dolor?</p>
                          <small>October 13 2013 - <a href="#">Read more</a></small>
                        </div>
                        <div id="slide-content-1">
                          <h5>Slide Two</h5>
                          <p>Mini carousel with Bootstrap</p>
                          <small>October 15 2013 - <a href="#">Read more</a></small>
                        </div>
                        <div id="slide-content-2">
                          <h5>Slider Three</h5>
                          <p>Facebook-style paged image slider</p>
                          <small>October 19 2013 - <a href="#">Read more</a></small>
                        </div>
                        <div id="slide-content-3">
                          <h5>Slider Four</h5>
                          <p>Lorem Ipsum Dolor</p>
                          <small>October 22 2013 - <a href="#">Read more</a></small>
                        </div>
                        <div id="slide-content-4">
                          <h5>Slider Five</h5>
                          <p>Lorem Ipsum Dolor</p>
                          <small>October 25 2013 - <a href="#">Read more</a></small>
                        </div>
                        <div id="slide-content-5">
                          <h5>Slider Six</h5>
                          <p>Lorem Ipsum Dolor</p>
                          <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
                        </div>

                      </div>



                    </div>

                  </div>
                </div> <!--/Slider-->

and this is the javascript:

$('#myCarousel').carousel({
            interval: 5000
    });

$('#carousel-text').html($('#slide-content-0').html());

    // When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
            var id = $('.item.active').data('slide-number');
        $('#carousel-text').html($('#slide-content-'+id).html());
    });

The javascript console returns no errors, so i can't understand what's the problem. Thank you!

Answer 1

Your HTML file ain't detecting the jQuery code

Add this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>