Twitter Bootstrap Carousel startet nicht automatisch

Question

Ich habe ein Karussell auf meiner Seite, das mit Twitter Bootstrap erstellt wurde. Ich bin mir nicht sicher, warum es nicht automatisch startet, wenn die Seite geladen wird, wird es nicht gestartet, bis Sie auf den Pfeil klicken, um zur nächsten Folie zu gelangen, dann tickt der Timer. Aus der Bootstrap-Dokumentation heißt es, dass er initialisiert werden kann mit diesem Objekt, aber wo stelle ich das hin?

$('.carousel').carousel({ 
    interval: 2000 
}) 

Meine Website hat zwei Javascript-Dateien, jquery-1.7.2.min.js und bootstrap.min.js.

Answer 1

Vorausgesetzt, dass Sie alles an der richtigen Stelle, versuchen diese Zugabe vor dem schließenden Body-Tag:

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

Answer 2

ich Ihre gleiche Problem hatte und die Lösung gefunden;

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 

<script type="text/javascript"> 
    var $ = jQuery.noConflict(); 
    $(document).ready(function() { 
     $('#myCarousel').carousel({ interval: 3000, cycle: true }); 
    }); 
</script> 

http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

Answer 3

ich seit Monaten habe sitzen auf diesem, ich jedes Mal: ​​ Da wir die Javascripts beide am Ende der Seite setzen, muss der Aufruf der Funktion nach ihnen werden gestellt precompiled die Vermögenswerte etwas falsch ging in die Vermögenswerte public/Ordner so etwas nicht funktionierte. Ich musste alte Assets in den Ordner "public/assets" kopieren, damit sie funktionierte. Lange habe ich versucht herauszufinden, in welcher Reihenfolge die Importe sein müssen und welche Statements bereits arbeitende Dinge zerstören.

Meine Lösung nach all dieser Zeit, ich diese importieren muß:

//= require jquery 
//= require jquery_ujs 
//= require twitter/bootstrap 
//= require_tree . 

Und immer noch kein Skript setzen, zum Beispiel ein Start-Karussell-Skript in die Datei application.js. Wenn ich es in die application.html.erb-Datei wie folgt platzieren:

<%= javascript_include_tag "application" %> 

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

Alles funktioniert gut. Hinweis: Es muss unter die Anwendung include_tag anderen whise Ich kann nicht arbeiten.

Hinweis 2: Ich habe auch ein googlemaps-Skript, aber es wird nur (!) In die Datei importiert, in der die Karte lebt. Es ist dieses Skript:

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script> 

Ich hoffe wirklich, dass dies hilft anderen Menschen ihre Zeit zu retten. Es gibt einige Dinge, die nicht so offensichtlich sind.

Answer 4

Ich dachte, ich würde etwas über bootstrap 3 in eckigen arbeiten hinzufügen.

Je nachdem, wie umfangreich Ihre Anwendung in Angular ist, kann es zu einer leichten Verzögerung beim Laden des Karussells kommen. Ich habe zum Beispiel das Karussell als Vorlage geladen, die nach dem Laden des Dokuments leicht geladen wird. Daher musste ich eine kleine Zeitüberschreitung für den Code hinzufügen, um das Karussell zu starten.

 <div class="mWeb-container" ng-controller="mWebCtrl"> 
     <div ng-include="nav_tpl" ng-hide="print_layout"></div> 
     <div ng-include="carousel_tpl" ng-hide="print_layout"></div> 
     <div ng-include="breadcrumbs_tpl" ng-hide="print_layout"></div> 
     <div ng-view=""></div> 
     <div ng-include="comments_tpl" ng-hide="print_layout"></div> 
     <div ng-include="footer_tpl" ng-hide="print_layout"></div> 
    </div> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript" src="angular/scripts/vendor/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
    <!-- 
     $(document).ready(function(){ 
      var mCarouselTO = setTimeout(function(){ 
      $('#Carousel').carousel({ 
       interval: 3000, 
       cycle: true, 
      }).trigger('slide'); 
      }, 2000); 
      var q = mCarouselTO; 
     }); 
    --> 
    </script> 

Answer 5

Das ist mir passiert. Aber - es gibt eine Option, die Pause ist: "Hover", das ist die Standardeinstellung.

Und diese Option machte meinen Vollbild-Slider natürlich auch auf der ersten Folie zu stoppen;) Also bitte setzen Sie Pause auf falsch oder etwas anderes als 'Hover'.

Answer 6

keine Notwendigkeit für eine JavaScript-Code, können Sie es auf Auto Änderung Datensatz data-interval="1000"

Die Zeitspanne zwischen automatisch Radfahren ein Element zu verzögern Attribut. Wenn falsch ist, wird das Karussell nicht automatisch durchlaufen.

<div id="carousel-example-generic" class="carousel slide" data-interval="1000" data-ride="carousel"> 

Answer 7

hatte ich das gleiche Problem, so fand ich, dass ich die data-ride="carousel" vom Bootstrap caruosel verpasst. Überprüfen Sie das in Ihrem Code. Link to Bootstrap doc

Answer 8

nur für die von Ihnen hinzufügen, die reagieren verwenden, um den Zyklus auslösen wie folgt vorgehen:

componentDidMount(){ 
    this.setState({activeIndex:0}) 
}