Quelqu'un peut-il me dire pourquoi mon carrousel bootstrap disparaît quand je clique sur le menu nav btn ..

Je veux lisser le défilement pour diviser sur la même page ... Tout corps peut-il résoudre ce problème étrange.

Voici un violon --------------- https://jsfiddle.net/vo1npqdx/502/

$(document).ready(function() {
  // Add smooth scrolling to all links
  $("#siteoverview_btn").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior

    $(".active").removeClass("active");

    // Prevent default anchor click behavior
    event.preventDefault();


    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $("#siteoverview_content").offset().top
    }, 800, function() {

      // Add hash (#) to URL when done scrolling (default click behavior)
    });
  });
});
<body>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- nav here -->
  <nav class="navbar navbar-default roboto normal menu" role="navigation">
    <div class="container">
      <div class="navbar-header">
      </div>
      <ul class="nav navbar-nav nav_bar_block">
        <li class="border_right"><a id="siteoverview_btn">SITE OVERVIEW</a></li>
      </ul>
    </div>
  </nav>


  <!-- nav here -->

  <div class="banner">
    <div class="notification_bar">
      <div class="container">
        <div class="content">
        </div>
      </div>
    </div>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://www.777a7.com/img65/vxxrimfdyqtwewgfynzp.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="http://www.777a7.com/img65/vxxrimfdyqtwewgfynzp.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="http://www.777a7.com/img65/vxxrimfdyqtwewgfynzp.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>


  <div class="main_body">
    <div class="container">
      <div class="body_content">
        <h3 class="body_head">AUCTION CENTRE</h3>
        <div class="row">
          <div class="col-sm-8">

            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of
              Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
              It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
              words etc.</p>

            <br>
            <div class="row content_points">
              <div class="col-sm-6">
                <h4>LATEST NEWS</h4>
                <hr class="underline">
                <ul>
                  <li><b>LAST UPDATED ON: MARCH 17, 2017</b></li>
                  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                  <li>Many desktop publishing packages and web page editors</li>
                  <li>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</li>
                  <li>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below</li>
                  <li>Many desktop publishing packages and web page editors</li>
                </ul>
              </div>
              <div id="siteoverview_content" class="col-sm-6">
                <h4>SITE OVERVIEW</h4>
                <hr class="underline">
                <ul>
                  <li>AWR Upload</li>
                  <li>AWR Report</li>
                  <li>Statistical Info</li>
                  <li>Gatepass Entry</li>
                  <li>Customised Reports</li>
                  <li>Other Info</li>
                  <li>Other Info 1</li>
                  <li>Other Info 2</li>
                </ul>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>






  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
0
Akshay Kumar 1 avril 2017 à 20:55

2 réponses

Pour ceux qui utilisent Bootstrap 4, il s'agit toujours d'une méthode valide, mais vous devez remplacer .item par .carousel.item

Remplacer

$( ".active" ).removeClass( "active" );

Avec

$('.active').not('.carousel-item.active').removeClass('active');

Ou, si vous utilisez un autre code utilisant la classe .active, remplacez-le si nécessaire.

0
Steve Shead 23 mars 2019 à 21:00

Supprimez simplement $(".active").removeClass("active"); à l'intérieur $("#siteoverview_btn").on('click', function(event) {...}). cela supprime la classe active de carrousel d'amorçage et l'erreur survient

$(document).ready(function() {
  // Add smooth scrolling to all links
  $("#siteoverview_btn").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior

    //$(".active").removeClass("active");

    // Prevent default anchor click behavior
    event.preventDefault();


    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $("#siteoverview_content").offset().top
    }, 800, function() {

      // Add hash (#) to URL when done scrolling (default click behavior)
    });
  });
});
<body>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- nav here -->
  <nav class="navbar navbar-default roboto normal menu" role="navigation">
    <div class="container">
      <div class="navbar-header">
      </div>
      <ul class="nav navbar-nav nav_bar_block">
        <li class="border_right"><a id="siteoverview_btn">SITE OVERVIEW</a></li>
      </ul>
    </div>
  </nav>


  <!-- nav here -->

  <div class="banner">
    <div class="notification_bar">
      <div class="container">
        <div class="content">
        </div>
      </div>
    </div>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://www.777a7.com/img65/vxxrimfdyqtwewgfynzp.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="http://www.777a7.com/img65/vxxrimfdyqtwewgfynzp.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="http://www.777a7.com/img65/vxxrimfdyqtwewgfynzp.jpg" alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>


  <div class="main_body">
    <div class="container">
      <div class="body_content">
        <h3 class="body_head">AUCTION CENTRE</h3>
        <div class="row">
          <div class="col-sm-8">

            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of
              Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
              It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
              words etc.</p>

            <br>
            <div class="row content_points">
              <div class="col-sm-6">
                <h4>LATEST NEWS</h4>
                <hr class="underline">
                <ul>
                  <li><b>LAST UPDATED ON: MARCH 17, 2017</b></li>
                  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                  <li>Many desktop publishing packages and web page editors</li>
                  <li>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</li>
                  <li>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below</li>
                  <li>Many desktop publishing packages and web page editors</li>
                </ul>
              </div>
              <div id="siteoverview_content" class="col-sm-6">
                <h4>SITE OVERVIEW</h4>
                <hr class="underline">
                <ul>
                  <li>AWR Upload</li>
                  <li>AWR Report</li>
                  <li>Statistical Info</li>
                  <li>Gatepass Entry</li>
                  <li>Customised Reports</li>
                  <li>Other Info</li>
                  <li>Other Info 1</li>
                  <li>Other Info 2</li>
                </ul>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>






  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
0
Deep 3015 1 avril 2017 à 18:35