Bootstrap carousel moves up when clicked

user_7769379 0
Viewed 1219

I'm quite confused as to why my page or my carousel moves up whenever I click it the first time? Here is my code, I got it from Bootstrap.

#tips #carousel-example {
  margin: auto;
  width: 900px;
}

#tips {
  background-color: #fcb595;
  max-height: 100%;
}
<div id="tips">
  <div id="carousel-example" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example" data-slide-to="1"></li>
      <li data-target="#carousel-example" data-slide-to="2"></li>
      <li data-target="#carousel-example" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner">
      <div class="item active">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
      <div class="item">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
      <div class="item">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
      <div class="item">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
      <div class="item">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
    </div>

    <a class="left carousel-control" href="#carousel-example" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>

And here is a gif to show what I mean:

enter image description here

twitter-bootstrap css html jquery javascript
2 Answers

Try replacing the href in the controls with data-target :

<a class="left carousel-control" data-target="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" data-target="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>
user_8684970

I found this question today and though it's late I'm going to answer it for future visitors.

Most of the developers use some script to animate to the target element like I also did it. The same issue I can see in your animated image.

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  //... some logic
  // eg.
  $('html, body').animate({
    scrollTop: $(this).offset().top - 100
  }, 1000, 'swing');
});

This is what the reason of issue with the carousel click. So, to avoid such issue, you can simply return the click if is on carousel control:

$('a[href^="#"]').on('click', function(e) {
  if ($(this).data('slide')) return;
  e.preventDefault();
});
user_21387520
Related