Question

我试图使用我在bootply上找到的这个小旋转木马，但我遇到了一些问题。首先，旋转木马不会滑动，所以我只能看到第一张图像和幻灯片按钮不起作用，其次是照片附近的文字不可见，可能导致显示它的javascript功能没有显示工作

这是我的HTML代码：

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

这是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());
    });

javascript控制台不会返回任何错误，因此我无法理解问题所在。谢谢！

Answer 1

您的HTML文件未检测到jQuery代码

添加：

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

Bootstrap轮播未滑动且未显示文字

1 个答案: