it-swarm.com.de

Twitter Bootstrap Karussell startet nicht automatisch

Auf meiner Website befindet sich ein Karussell, das mit Twitter Bootstrap erstellt wurde. Ich bin mir nicht sicher, warum es nicht automatisch gestartet wird, obwohl es beim Laden der Seite erst gestartet wird, wenn Sie auf den Pfeil klicken, um zur nächsten Folie zu gelangen, und dann der Timer einsetzt. In der Dokumentation bootstrap heißt es es kann mit diesem Objekt initialisiert werden, aber wo lege ich das?

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

Meine Website verfügt über zwei Javascript-Dateien, jquery-1.7.2.min.js und bootstrap.min.js.

20
Jashua

Angenommen, Sie haben alles andere an Ort und Stelle, versuchen Sie, dies vor dem schließenden Body-Tag hinzuzufügen:

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

enter image description here

Ich hatte dasselbe Problem und fand die Lösung. Da wir beide die Javascripte am Ende der Seite einfügen, muss der Aufruf der Funktion nach ihnen erfolgen:

<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/

9
Mujahidul Jahid

Ich dachte, ich würde etwas über bootstrap 3, das im Winkel arbeitet, hinzufügen.

Je nachdem, wie umfangreich Ihre Anwendung in Angular ist, kann es beim Laden des Karussells zu einer leichten Verzögerung kommen. Ich habe zum Beispiel das Karussell als Vorlage geladen, die nach dem Laden des Dokuments leicht geladen wird. Daher musste ich eine kurze 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>
8
kronus

Ich hatte das gleiche Problem und habe festgestellt, dass ich den data-ride="carousel" Im bootstrap Caruosel verpasst habe. Überprüfen Sie dies in Ihrem Code. Link zu Bootstrap doc

3
Ali Madadi

Sie benötigen keinen Javascript-Code, sondern können ihn mithilfe des Datenattributs data-interval="1000" Auf automatische Änderung einstellen.

Die Zeitspanne, die zwischen dem automatischen Durchlaufen eines Elements vergehen soll. Bei false wird das Karussell nicht automatisch durchlaufen.

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

http://getbootstrap.com/javascript/#carousel

2
John Magnolia

Ich habe darüber monatelang gesessen, und jedes Mal, wenn ich die Assets vorkompiliert habe, ist etwas Falsches in den Ordner "assets public /" eingegangen, sodass etwas nicht funktioniert hat. Ich musste alte Assets in den Ordner public/assets kopieren, damit es funktioniert. Lange habe ich versucht herauszufinden, in welcher Reihenfolge die Importe sein müssen und welche Statements erforderlich sind, zerstören bereits funktionierende Dinge.

Meine Lösung nach all der Zeit ist, ich muss diese importieren:

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

Und stellen Sie niemals ein Skript ein, z. Ein Start-Karussell-Skript in die Datei application.js. Wenn ich es wie folgt in die Datei application.html.erb lege:

<%= javascript_include_tag "application" %>

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

Alles funktioniert gut. Hinweis: Es muss nter der Anwendung include_tag sein, ansonsten kann ich nicht arbeiten.

Hinweis 2: Ich habe auch ein Google Maps-Skript, das jedoch nur (!) In die Datei importiert wird, in der sich die Karte befindet. Es ist dieses Skript:

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

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

1
Niko

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

Und diese Option hat dazu geführt, dass mein Vollbild-Schieberegler natürlich auch auf der ersten Folie angehalten wurde;) Setzen Sie die Pause auf "Falsch" oder etwas anderes als "Schweben".

0
Martin Klasson

Nur um für diejenigen unter Ihnen, die reagieren, hinzuzufügen, wird der Zyklus folgendermaßen ausgelöst:

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