Twitter Bootstrap Carousel: Right & Left arrows not working

Question

The arrows for BS carousel are not moving the items back and forth

I'm suspecting this might be either a CSS issue or have something to do with the fact that the carousel is being used inside the tabs.

Answer 1

I had the same problem, it was caused because my page was scroll based so I put in a little script to smooth the scroll of every link which started with # . This screwed the left and right buttons because they use href="#myCarousel" .
To solve this problem I added an exception to the script like down here.
This is the script before I modified it:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

And I just added an exception with thw href attribute:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if( $(this).attr("href")=="#myCarousel") return;//This is the exception
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

This answer is year and a half late but I hope it helps someone else.

edit 3/12/2015:
You can also use the data-target attribute instead of href

Answer 2

Is your HTML formatted like this?

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</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>

Hope that helps!

Answer 3

My Carousel was not working too, and I changed many things. However finally I discover the problem; my problem is smooth scroll and wow.js. Actually, I could not press the prev or next button because of smooth scroll thing. When I try to press button, page is going down or up. Due to that, I change my smooth init and wow init like that.

Smooth Scroll:

$(function() {
$('a[href*=#]:not([href=#])').click(function() {
    if( $(this).attr("href")=="#CarouselSlider") return;
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 900);
            return false;
        }
    }
});

});

and also Wow.js init:

$(document).ready(

function() {

    $("html").niceScroll({
        cursorcolor:"#ba8e16",
        scrollspeed :"100",
        cursorborder:"1px solid #cf9c11",
        horizrailenabled: "false",
        cursorborderradius: "0px"
    });

}

); new WOW().init();

Now, horizontal smooth is over and my problem disappear somehow. I hope, it will help.

Answer 4

Same thing happened to me. Turns out I just had the bootstrap script on the before the jquery script. Changed this and then it worked fine.

Answer 5

You need to include boostrap.js after jQuery to make it work. I also found an error for a link to jQuery :

<script type='text/javascript' src='/ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

should be

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

Answer 6

Bootstrap depends on jQuery. Check out their getting-started template .

Answer 7

Place JQ and your bootstrap.min.js at the bottom of your page just before </body>, like this:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

Keep in mind you need a version of JQ that works with your version of bootstrap. I'm using bootstrap version 2, so I need JQ 1.11.1