1

I have the Bootstrap carousel working, but there is no "slide" animation. It just replaces the images. I've checked through Twitter Bootstrap Carousel Not Sliding and Twitter Bootstrap Carousel Slide Doesn't Work but the prescriptions there dontt seem to work for me.

My bootstrap.js file definitely includes the "transition" bit. And because the carousel works, I'm obviously getting the right classes in there. I'm pretty stumped on why the slide animation isn't working.

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 section

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

And you can see the output at www.lessonupapp.com

Community
  • 1
  • 1
bwest87
  • 1,223
  • 13
  • 12

1 Answers1

0

I think it's because your images are too big... And i am not joking here! make it smaller and it will work. Your images are more than 5000px x 4000px big and more than 1mb...

Chanckjh
  • 2,587
  • 2
  • 22
  • 28