Karuzela Bootstrap Nie działa

Próbuję zaimplementować karuzelę na Bootstrap na Twitterze i jak dotąd nie udało mi się. Mam następującą stronę:Karuzela Bootstrap Nie działa

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Fluxware: Play, learn and build games</title> 
    <meta name="description" content="Home page for Fluxware"> 
    <meta name="author" content="Tim Butram"> 

    <!-- CSS Stylesheets --> 
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> 

    <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 

    <!--For shitty webbrowsers --> 
    <!--[if lt IE 9]> 
    <script src="//html5shim.googlecode.com/sbn/trunk/html5.js></script> 
    <![endif]--> 

    <!-- Favicon --> 
    <link rel="favicon" href="images/favicon.ico"> 
</head> 

<body> 

    <!-- Navbar --> 

    <div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Play</a></li> 
      <li><a href="#">Learn</a></li> 

      <li><a href="#">Build</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 

    <!-- Grid --> 
    <div class="container"> 
    <div class="row"> 

    <div class="span12"> 
     <div class="hero-unit"> 
    <div id="myCarousel" class="carousel"> 
      <div class="carousel-inner"> 
      <div class="active item"><img src="/images/1.png" /></div> 
     <div class="item"><img src="./images/2.png" /></div> 
     <div class="item"><img src="./images/3.png" /></div> 
      </div> 

     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
     </div> 
     </div> 

     <div class="row"> 
     <div class="span4"> 
      <a class="btn btn-large">Play</a> 
     <p>Play games created with Fluxware.</p> 

     </div> 

    <div class="span4"> 
     <a class="btn btn-large">Learn</a> 
     <p>Learn how to create games and game assets</p> 
    </div> 

    <div class="span4"> 
      <a class="btn btn-large">Build</a> 

     <p>Use the Fluxware tools to create game.</p> 
     </div> 
     </div> 
    </div> 
    </div> 
    </div> 
    <script src="../bootstrap/js/jquery.js"></script> 
    <script src="../bootstrap/js/bootstrap-carousel.js"></script> 

    <script src="../bootstrap/js/bootstrap-transition.js"></script> 
</body> 
</html>

Wszystko wydaje się poprawne, z wyjątkiem karuzeli. Czytając stronę Bootstrap, wydaje się, że muszę trzymać

$('.myCarousel').carousel();

gdzieś, ale nie mam pojęcia, gdzie, jak i dlaczego. Poza tym, w konsoli błędów Firefox, otrzymuję dwa błędy

$ is undefined

w bootstrap-carousel.js [linia 125] i

$ is not a function

w bootstrap-transition.js [linię 22 ]

Źródło

2012-02-19 Atrus

Z tego co rozumiem, $ ('karuzela') karuzela(); to jQuery, aby wywołać metodę karuzeli na DIV z id = karuzela. Więc umieściłem to w scenariuszu na dole.Niestety, nie wydawało się to nic zrobić, z wyjątkiem tworzenia kolejnego błędu "$ nie jest zdefiniowany" – Atrus

Oczywiście jQuery nie został poprawnie załadowany.
Spróbuj załadować dwa skrypty na stronie <head>.

Kod uruchomić karuzelę jest

<script> 
// Load this when the DOM is ready 
$(function(){ 
    // You used .myCarousel here. 
    // That's the class selector not the id selector, 
    // which is #myCarousel 
    $('#myCarousel').carousel(); 
}); 
</script>

Można go umieścić albo w <head> po dwóch innych skryptów
lub gdy inne skrypty są teraz.

Źródło

2012-02-19 21:45:42 TheShellfishMeme

Ugh. Masz rację, że jQuery nie ładuje się poprawnie. Nawet go tam nie było. Dziękuję za pomoc w umieszczeniu mojego fragmentu js. – Atrus

Miał ten sam problem.

Dla mnie musiałem użyć jQuery 1.7.1, ponieważ 1.6.4 nie działało.
musiałem to bootstrap-transition

Źródło

2012-03-25 18:14:59 alex

używałem Django's JQuery (nie wiem wersję) i nie działa. Działa jednak z Jquery 1.7.1.

Źródło

2012-06-23 21:41:32

Niedawno miał ten sam problem, wydaje się, że w aktualnej wersji Bootstrap, należy również dołączyć klasę o nazwie slajdów.

<div id="myCarousel" class="carousel slide span12">

Źródło

2012-09-25 23:08:11

można zdefiniować jako identyfikator nie klasy, więc należy uruchomić karuzelę przez ten kod jQuery, więc zastąpić

$('#myCarousel').carousel();

zamiast

$('.myCarousel').carousel();

Źródło

2015-04-16 06:39:42 Mohamm6d

Jeśli zmaga się pokaz slajdów z karuzeli Bootstrap do pracy - Oto szablon z pozycjonowalnymi kontrolkami i paskiem postępu na dole, który śledzi slajdy. .

[http://codepen.io/TheNickelDime/][1]

<div class="Slideshow_carousel-wrapper container-fluid"> 
    <span class="Slideshow-ctl-L" onclick="carousel_left()"></span> 
    <div class="carousel slide" data-ride="carousel" ... </div>  
    <span class="Slideshow-ctl-R" onclick="carousel_right()"></span> 

</div> 

    <div class="container-fluid Slideshow_progress-bar">  
     <ul id="slideshow_progress" class="Slideshow_progress"></ul> 
    </div>

Źródło

2017-03-10 00:57:03 TheNickelDime

Karuzela Bootstrap Nie działa

Odpowiedz

Powiązane problemy