Bootstrap Carousel Jumps to top of page when advancing

Question

When I advance the slider manually, the slider jumps to the top of the page. How can I prevent this from happening? Help much appreciated! Here\'s the code:

<         


        

Answer 1

you should try with jquery:

$('.carousel-control').click(function (e) {
  e.preventDefault();
});

Answer 2

This one worked well for me. Replace href with "data-target" <a class="carousel-control right" data-slide="next" data-target="#carousel">

Answer 3

You can either do this inline (less clean) :

<a class="left carousel-control" role="button" data-slide="prev" 
  onclick="$(this).closest('.carousel').carousel('prev');">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" role="button" data-slide="next"  
  onclick="$(this).closest('.carousel').carousel('next');">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>

or you can do globally assuming you remove the href="#controlid :

$('body').on('click','.carousel-control',function() {
   $(this).closest('.carousel').carousel( $(this).data('slide') );
});

or you can do it individually by being more specific in your selector

$('body').on('click','#carouselID .carousel-control',function() {
   $(this).closest('.carousel').carousel( $(this).data('slide') );
});

Answer 4

Set href to href="javascript:void(0)" then add this somewhere in your js:

$('.carousel-control.right').click(function(){ $('.carousel').carousel('next')});
$('.carousel-control.left').click(function(){ $('.carousel').carousel('prev')});

Answer 5

I've had the same problem

my a tag looked like:

<a class="carousel-control right" data-mixpanel-tracker="Slider Next" data-slide="next" href="#carousel">

it was solved by removing extra mix-panel attributes in the tag:

<a class="carousel-control right" data-slide="next" href="#carousel">

sorry that it isn't solving your problem, but it might help others with similar problem.

Answer 6

i tried to set up a working document of this. i don't see the jump behavior. did nothing out of the ordinary just copied your markup, added sample images, bootstrap.js, bootstrap-carosel.js, and bootstrap.css

http://brandonam.com/bootTest/boot.html

fyi: typical browser behavior for '#myCarousel' would be to point the window focus to the element marked '#myCarousel' ... but i think bootstrap prevents this by default. shouldn't be moving around.