web-dev-qa-db-ger.com

Wie kann ich das Bootstrap js-Karussell automatisch so einrichten, dass die Seite automatisch geladen wird?

Verwendung von bootstrap.js Version 2.02

Ich versuche, das Twitter-Bootstrap-Karussell automatisch zu starten, sobald jemand meine Website besucht. Im Moment funktioniert das Auto-Cycling nur, wenn Sie mindestens einmal auf eine der Cycle-Tasten klicken. 

Ich möchte, dass das Karussell sofort mit dem Radfahren beginnt.

Weiß jemand, wie das geht? 

Meine Website ist hotairraccoon.com

Sie werden sehen, wie nach einem Klick auf das Karussell alle 5 Sekunden ein Zyklus beginnt, aber ich möchte nicht, dass der Klick erforderlich ist, um den Karussellinhalt anzuzeigen.

Vielen Dank!

25
Jonathan Larkin

Hinweis: Wie in den Kommentaren erwähnt, funktioniert diese Lösung für Bootstrap 2 ordnungsgemäß. Anweisungen dazu, wie Sie dasselbe Verhalten in Bootstrap 3 erzielen, finden Sie in der Antwort von MattZ. 

Ich hatte das gleiche Problem wie Sie und alles, was ich tun musste, um das Problem zu beheben, war die Karussellmethode ("Zyklus"), nachdem ich das Karussell initialisiert hatte:

<script type="text/javascript">
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 3000
    });

    $('.carousel').carousel('cycle');
});
</script>  

Mir ist klar, dass diese Frage alt ist, aber ich habe heute Nacht gegoogelt und versucht, sie selbst herauszufinden, und niemand hat sie richtig beantwortet. Die von oben gewählte Antwort startet das Karussell nicht automatisch, es wird erst gestartet, wenn eine Taste gedrückt wurde. Dies ist nicht das, wonach das OP gesucht hat.

44
Jesse Carter

In Bootstrap 3.0 kann dies durch Hinzufügen eines 'Data-Ride'-Attributs zum Karussellcontainer erreicht werden:

<div id="my-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        ...
    </div>
</div>

https://github.com/twbs/bootstrap/blob/v3.0.0/js/carousel.js#L210

40
Matt Zuba
$('.carousel').carousel({
  interval: 2000
})
9
Straseus

Die Datei jquery.js muss vor den bootstrap.js geladen werden, unabhängig davon, ob sie in den Head-Tags oder am Ende Ihrer Datei stehen. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"type="text/javascript"></script>
4

In Bootstrap 3.0 kann dies durch Hinzufügen eines 'Data-Ride'-Attributs zum Karussellcontainer erreicht werden:

3
Mazen Shaheed

Versuchen Sie, Ihr Karussell folgendermaßen zu initialisieren:

$('.carousel').carousel().next();
2
dfsq

wenn keine dieser Lösungen für Sie funktioniert. Versuche dies:

$(document).ready(function () {
  function playcarousel(){
    $('.carousel-control.right').trigger('click');
  } 
  window.setInterval(playcarousel, 4000); 
});
2
lvicedo

Ich bin mir nicht sicher, ob Sie das geklärt haben, aber ich hatte auch dieses Problem. Ich habe es gelöst, indem ich die Karussellintervalleinstellung in eine Funktion wie diese verpackte:

!function ($) {
$(function() {
    $('.carousel').carousel({ interval: 3000 })
});
}(window.jQuery);
1
Shaun Scovil

Es gibt eine weitere Möglichkeit, das Bootstrap-Karussell automatisch zu durchlaufen. 

verwenden Siedata-ride="carousel"Attribut. Sie weist den Bootstrap an, das Karussell sofort zu animieren, wenn die Seite geladen wird.

1
Rohit Waghela

Eine schnelle und schmutzige Lösung ist das programmgesteuerte Klicken auf die Schaltfläche in document ready:

$(function() {
  $(".right.carousel-control").click();
});

Übrigens: Stellen Sie sicher, dass Sie jQuery vor den anderen Skripts laden, die sich auf $ beziehen. Im Moment haben Sie zwei Uncaught ReferenceError: $ is not defined, da Sie $ in Zeile 101 und 182 aufrufen, Jquery jedoch zuerst in Zeile 243 geladen wird.

Ich würde empfehlen, ein Tool wie Firebug oder ein Entwickler-Tool (Chrome/Safari) zu verwenden, um diese Fehler abzufangen.

EDIT: Ich denke, Sie haben bereits eine funktionierende Lösung, aber da Sie jquery verwenden, bevor es geladen wird, funktioniert es nicht.

1
ebaxt
    <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>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
               <img src="img1" class="img-responsive" alt="stuff1" > 
              </div>
              <div class="item">
               <img src="img2" class="img-responsive" alt="stuff2" > 
              </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>

 <!--This script should be at the very bottom of the page (footer works for me)-->  
    <script>
    $('#myCarousel').carousel
    ({
        interval: 2000,


        })

    </script>
0
Zeeba

Es gibt zwar zweifellos richtige Antworten, aber ich wollte nur hinzufügen, dass Sie das genaue Verhalten reproduzieren können, das das Poster beschreibt, indem Sie Fehler in Ihren Code einfügen. Entfernen Sie beispielsweise Semikolons oder das Skriptende-Tag, und das Karussell wird nicht mehr automatisch abgespielt.

Sie sollten also zuerst nach Fehlern in Ihrer Javascript-Konsole suchen!

0
ippi

Versuche dies.

$(document).ready(function ()
{
    $('.carousel').carousel({interval:5000,pause:false});
});
0
Laércio_Kelson

Dies ist die Lösung, die für mich funktioniert hat, basierend auf der Antwort von Jesse Carter auf diese Frage. Ich habe keine Ahnung, warum dies funktioniert, aber aus irgendeinem Grund sind zwei Aufrufe erforderlich, einer innerhalb des Dokumentpunkts und der andere außerhalb. Wenn ich eines davon entferne, geht etwas schief, z. B. kann die Pausenfunktion nicht ordnungsgemäß ausgeführt werden oder der automatische Zyklus. Darüber hinaus scheint das Intervall nur innerhalb von doc.ready zu funktionieren. Kommentare von Javascript-Köpfen sind herzlich willkommen ;-), aber ich vermute, dass dieser Bereich von T.B. ist nicht völlig fehlerfrei! Ich verwende 2.0.2, von dem ich weiß, dass es etwas zurückliegt (derzeitige Version ist 2.0.4 ), aber ich sehe keine Änderungen in diesem Bereich 

jQuery(document).ready(function () {
    jQuery('#myCarousel').carousel(
    {
    interval:2000
    });
});

jQuery('#myCarousel').carousel();
0
byronyasgur

Der richtige Weg, dies zu beheben, besteht darin, die "aktive" Klasse beim Erstellen des ersten Bildes im Karussell hinzuzufügen. Dadurch beginnt das Karussell so schnell wie möglich mit dem Radfahren.

Hier ist ein Beispiel:

    <div class="carousel slide">
      <div class="carousel-inner">
        <div class="item active"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
0
Vishal Sood