CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapcarousel
Syed Muhammad Iftikhar
Syed Muhammad Iftikhar

Reputation: 113

How to stop scroll top on clicking next or prev btn of Carousel?

Following is the simple carousel in use, even it looks fine here in coding, however on browser whenever tried to click next or prev button, page is scrolled to top of HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>
<h1>SAMPLE CONTENT HERE</h1>
    <h1>SAMPLE CONTENT HERE</h1>
    <h1>SAMPLE CONTENT HERE</h1>
    <h1>SAMPLE CONTENT HERE</h1>
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

Found the reason somewhere with data-target, however, unable to figure it out, and how to stop scrolling top...

Looking for simplest solution to understand, as new to HTML..

Thanks in advance

Cheers..

Upvotes: 3

Views: 3691

Answers (2)

Rangel R. Morais
Rangel R. Morais

Reputation: 2093

Just change href="#myCarousel" to data-target="#myCarousel" .

Upvotes: 11

Bing Han
Bing Han

Reputation: 684

Tip #1:

You can add event.preventDefault() to prevent default behaviour with hashbang:

$('a[class^=carousel-control-]').click(function (event) {
    event.preventDefault();
});

Tip #2:

If you have plugins like SmoothScroll, you can unbind it by:

$('a[class^=carousel-control-]').unbind('click.SmoothScroll');

To look for all the click events bind to the element, use:

jQuery._data($('a[class^=carousel-control-]')[0], "events")

Upvotes: 0

Related Questions