wake-up-neo.com

Bootstrap Carousel-Inneres "Autoplay"

Kann mir jemand helfen? Ich weiß, dass hier ein paar Dinge falsch sind. Warum muss ich bootstrap.min.js am Ende der Kopfzeile und am unteren Rand der Seite verlinken? Ich habe versucht, eine nach der anderen zu verwenden, aber es funktioniert nicht. Als nächstes möchte ich, dass das Karussell startet, wenn ich die Seite lade und auf die Controller klicke. nicht nur, wenn ich auf die Controller klicke .

    <head>
        <title>The James Baldwin School</title>
        <link href="Framework/css/bootstrap.css" rel="stylesheet" type="text/css">
        <link href="Main.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <header>
        <div class="navbar-wrapper">
  <div class="container">
    <div id="navtop" class="navbar navbar-inverse navbar-static-top">

        <div class="navbar-header">
        <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="navbar-brand" href="#">The James Baldwin School</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parents <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Students <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Teachers <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>



    </div>
  </div><!-- /container -->
</div><!-- /navbar wrapper -->

        <!--- Javascript Bootstrap --->
        <script src="Framework/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</header>


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
  <!-- 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>
  </ol>
  <div class="carousel-inner">
  <div class="item active">
      <img src="http://1.bp.blogspot.com/-BUrT0CP-6nQ/U1prUuv6VjI/AAAAAAAAFbY/a6PUNgNhSWM/s1600/1500x500-New-York-Skyline-Twitter-Header0017.jpg" style="width:100%" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <h1>Bootstrap 3 Carousel</h1>
          <p>Pictures slide with overlapping words</p>
          <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
        </p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://1.bp.blogspot.com/-jBZKbiHI_2U/U1pszgzFAbI/AAAAAAAAFcI/8xrxWuBse9o/s1600/1500x500-New-York-Skyline-Twitter-Header0024.jpg" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <h1>Each Slide can be different</h1>
          <p>I just need some one to pick the pictures and words</p>
          <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://mooxidesign.com/wp-content/uploads/2014/04/New-york-1500x500.jpg" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <h1>Percentage-based sizing</h1>
          <p>This Site is fully responsive and adjusts to the size of the browser your using. Meaning that it looks great on smart-phones</p>
          <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>  
</div>       
<!-- /.carousel -->


<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

  <!-- Three columns of text below the carousel -->
<div id="about">
  <div class="row">
    <div class="col-md-4 text-center">
      <img class="img-circle" src="http://placehold.it/140x140">
      <h2>Brady Smith</h2>
      <p>Principal Co-Director</p>
      <p><a class="btn btn-default" href="#">View details »</a></p>
    </div>
    <div class="col-md-4 text-center">
      <img class="img-circle" src="http://placehold.it/140x140">
      <h2>Josh Heisler</h2>
      <p>Teacher Co-Director</p>
      <p><a class="btn btn-default" href="#">View details »</a></p>
    </div>
    <div class="col-md-4 text-center">
      <img class="img-circle" src="http://placehold.it/140x140">
      <h2>Christine Olsen</h2>
      <p>Admissions</p>
      <p><a class="btn btn-default" href="#">View details »</a></p>
    </div>
  </div><!-- /.row -->
</div>

  <!-- START THE FEATURETTES -->



  <!-- /END THE FEATURETTES -->


  <!-- FOOTER -->
  <footer>
    <p class="pull-right"><a href="#">Back to top</a></p>
    <p>This site was created by Isaac Perez. · <a href="http://www.google.com">Check it out</a></p>
  </footer>

  </div><!-- /.container -->

</body>
        <script src="Framework/js/bootstrap.min.js"></script>
        <script src="Framework/js/jquery-2.1.3.min.js"></script>
        <script type="text/javascript">// <![CDATA[
        var $ = jQuery.noConflict(); $(document).ready(function()  { $('#myCarousel').carousel({ interval: 3000, cycle: true }); });
        // ]]></script>
</html>
5
xXDarksnakeXx

Ich habe gerade ein Fiddle mit dem Karussell Ihres Beispiels, jQuery Version 2.1.3, bootstrap.js und bootstrap.css als externe Ressourcen und Ihr Skript eingerichtet, um das Karussell zu initialisieren

$('#myCarousel').carousel({
  interval: 3000,
  cycle: true
}); 

und es funktioniert - es beginnt, wenn die Seite geladen wird und die Controller auch funktionieren. Dass es nicht funktioniert, kann beim Bootstrap ein Problem sein, bevor jQuery - jQuery vor dem Bootstrap eingefügt werden muss. Um zu überprüfen, ob dies der Fall ist, prüfen Sie, ob eine Fehlermeldung/Konsolennachricht wie "Fehler: Bootstraps JavaScript erfordert jQuery" angezeigt wird. Außerdem enthalten Sie zwei verschiedene jQuery-Versionen - 1.11.1 und 2.1.3. Wenn nicht notwendig, z. Versuchen Sie bei einigen Plugins, die eine ältere jQuery-Version verwenden, einfach die neueste Version zu laden.
Außerdem platzieren Sie Skript-Tags zwischen den schließenden body- und html-Tags, die funktionieren können, aber nicht gültig sind. Weitere Informationen finden Sie unter link, Skript-Tags zwischen </ body> und </ html> .
Als Referenz für die Verwendung verschiedener jQuery-Versionen für den Fall, dass dies wirklich notwendig wäre, können Sie http://api.jquery.com/jquery.noconflict/ überprüfen.

9
matthias_h

Sie können dies mit dem data-interval Tag ..__ durch das HTML tun. Fügen Sie es in <div id="myCarousel" class="carousel slide"> ein, damit es so aussieht:

<div id="myCarousel" class="carousel slide" data-interval="3000">

Der Wert von 3000 kann auf eine höhere Zahl eingestellt werden, um die Geschwindigkeit zu verringern, und eine niedrigere Zahl, um die Geschwindigkeit zu erhöhen.

10
tonyynot

Fügen Sie im übergeordneten Karussell div ..__ das benutzerdefinierte Attribut data-ride="carousel" hinzu. Sie können optional data-interval="5000" hinzufügen, um die Dauer des Schiebereglers in Millisekunden zu ändern.