1. Zuhause
  2. Frage und Antwort
  3. Bootstrap-Karussell nicht automatisch gleiten

Bootstrap-Karussell nicht automatisch gleiten

2012-06-27 15 views
11

Ich benutze Bootstrap von Twitter Karussell (neueste Version) und ich habe es funktioniert - außer dass es nicht automatisch zu rutschen beginnt. Es funktioniert gut, nachdem Sie auf eine der Navigationsschaltflächen geklickt haben. Nicht sicher, warum es das macht.Bootstrap-Karussell nicht automatisch gleiten

Hier ist mein JS-Setup in der Kopfzeile:

<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/jquery.js'; ?>"></script> 

<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-carousel.js'; ?>"></script> 
<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-transition.js'; ?>"></script>

Und die HTML:

<div id="myCarousel" class="carousel slide"> 
<div class="carousel-inner"> 

    <div class="active item"> 
    <div class="image-position-right"> 
     <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a> 
    </div> 
    </div> 


    <div class="item"> 
    <div class="image-position-right"> 
     <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a> 
    </div> 
    </div> 

</div> 

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

Auch diesen Erfolg auf nicht gerade hinzugefügt:

<script> 
$('#myCarousel').carousel({ 
    interval: 1200 
}); 
</script>

Afte R die obige Änderung vorzunehmen, die JavaScript-Konsole sagt:

Uncaught Typeerror: Object # hat kein Verfahren Karussell (anonyme Funktion) b.extend.ready jquery.min.js: 29 u

Irgendwelche Gedanken darüber, warum das nicht funktionieren würde?

Quelle

2012-06-27 William H

+0

Haben Sie schon einmal $ ('. Carousel'). Carousel() benutzt? – user1190992

+0

Nur mit diesem Skript aktualisiert - aber das Hinzufügen hat nicht geholfen –

+0

@WilliamH Stellen Sie sicher, dass Sie das Javascript ('$ ('. Karussell'). Karussell();') in einem '$ .document.ready()' Aufruf hinzufügen . Wenn das div nicht existiert, wenn '.carousel()' aufgerufen wird, wird es nicht automatisch gedreht. –

Antwort

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

Wenn es immer noch nicht funktioniert, suchen Sie nach möglichen Fehlern in der Konsole des Browsers (firebug/chrome ..).

Für

Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u

Stellen Sie sicher:

Nur ein jQuery ist

enthalten

Nur eine Bootstrap-carousel.js oder bootstrap.js enthalten ist.

jQuery zuerst enthalten, dann Bootstrap-carousel.js oder bootstrap.js, dann $ (document) .ready (...

Quelle

2012-06-27 19:37:29 baptme

+0

Ich aktualisierte die Frage mit der Konsole Fehler –

+0

Danke - aber ich habe darauf geachtet, genau zu folgen und jetzt den folgenden Fehler : Uncaught Typeerror: Object # hat kein Verfahren Karussell jQuery.Callbacks.fire jquery.js 1032 jQuery.Callbacks.self.fireWith jquery.js 1150 jQuery.extend.ready jquery.js: 421 DOMContentLoaded –

+0

Können Sie das Karussell auf der Klasse .carousel anstelle von #myCarousel auslösen – baptme

4

manchmal die falsche Version von JQuery mit den Aktionen des Twitters Bootstrap bewirken kann .. Karussell Sie sind derzeit v1.7.1 läuft, wenn Ihr anders verwenden es, die Fehler verursachen können

wenn Ihr nicht v1.7.1 laufen, können Sie es von hier herunterladen:

http://code.jquery.com/jquery-1.7.1.min.js

auch machen sicher, dass yo Ihr Code ist in ein Dokument verpackt:

$(document).ready(function() { 
     // code here 
    });

Quelle

2012-06-27 19:37:58 Jordizle

+0

Es ist in Ordnung mit der letzten Version 1.7.2, aber guter Punkt +1 – baptme

+0

Danke - aber keiner dieser Lösungsvorschläge funktioniert. Ich habe meine aktuelle jQuery durch den 1.7.1-Link ersetzt und das Dokument-Ready-Snippet verwendet. –

1

Ich hatte Ihr Problem 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 }); 
});

Manchmal müssen Sie nach dem carousal der JavaScript-Datei setzen: Da wir die Javascripts beide am Ende der Seite setzen, muss der Aufruf der Funktion nach ihnen gestellt werden. Eigentlich vor dem Ende der Seite.

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

Glücklich Codierung. Dank

Quelle

2014-02-03 17:28:21

0 
<script language="javascript" type="text/javascript"> 
$(window).load(function() 
{  
    $("#slideshow > div:gt(0)").hide(); 
    setInterval(function() { 
     $('#slideshow > div:first') 
     .fadeOut(750) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#slideshow'); 
          }, 11000); 
    }); 
</script>

Quelle

2017-10-17 21:23:36 Shuyaib

+0

Während dieser Code die Frage beantworten kann, würde das Bereitstellen eines zusätzlichen Kontextes, wie und/oder warum er das Problem löst, den langfristigen Wert der Antwort verbessern. – kerrin

+0

Danke. Dies könnte funktionieren, wie es in meinem funktioniert. – Shuyaib

0

Wenn Sie NgRoute und die oben genannten Lösungen verwenden nicht für Sie arbeiten, müssen Sie den folgenden JavaScript-Code auf der ganz oben auf die Vorlage aufgenommen werden NgRoute spritzt in die <ng-view></ng-view>:

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

Stellen Sie außerdem sicher, dass jQuery zuerst enthalten ist, bevor bootstrap.js enthalten ist. Das hat mir geholfen, als ich dieses Problem bei meinem Projekt hatte.

Quelle

2018-01-31 06:50:13

Verwandte Themen

 Verwandte Themen