1

我有 Bootstrap 轮播，但没有“幻灯片”动画。它只是替换图像。我已经检查过Twitter Bootstrap Carousel Not Sliding 和Twitter Bootstrap Carousel Slide doesn't Work 但那里的处方似乎对我不起作用。

我的 bootstrap.js 文件肯定包含“过渡”位。而且因为旋转木马有效，我显然在那里得到了正确的课程。我很困惑为什么幻灯片动画不起作用。

HTML

<head>
    <title>LessonUp - Learn Piano Faster</title>
    <!--Put in CSS link-->
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <link  type="text/css" href="stylesheets/bootstrap.css" rel="stylesheet" media="screen"/>
    <script src="js/bootstrap.js"></script>
    <!--<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"</script>-->
    <script>
    $(document).ready(function(){
        $('.carousel').carousel({
            interval:3000
        });
    });
    </script>
    <script>
        $(document).ready(function(){
            $("#email_submit").click(function(event){
                $(".alert-success").show();
                $(".alert-success").fadeOut(8000);
          });
      });
    </script>

轮播部分

<!--Carousel-->
           <div class="span7 slide">
               <div id="myCarousel" class="carousel slide">
       <!--Carousel Items-->
                   <div class="carousel-inner">
                        <div class="active item"><img src="img/Library_shot.png"></div>
                            <div class="item"><img src="img/performance_shot.png"></div>
                            <div class="item"><img src="img/lesson_shot.png"></div>
                   </div>
        <!--Carousel Nav-->
                   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
           </div>

您可以在 www.lessonupapp.com 上看到输出

4

1 回答 1

0

我认为这是因为你的图像太大了......我不是在开玩笑！让它更小，它会工作。您的图像超过 5000 像素 x 4000 像素，超过 1mb...

于 2012-12-23T00:46:14.663 回答