Bootstrap Carousel Không hoạt động

Tôi đang cố gắng triển khai băng chuyền Bootstrap của Twitter và cho đến nay tôi đã không thành công. Tôi có trang sau:Bootstrap Carousel Không hoạt động

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

Và mọi thứ dường như hiển thị chính xác, ngoại trừ băng chuyền. Từ việc đọc trang Bootstrap, có vẻ như tôi cần phải gắn một

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

ở đâu đó, nhưng tôi không biết đầu mối, cách thức hoặc lý do. Bên cạnh đó, trong các lỗi Firefox giao diện điều khiển, tôi nhận được hai lỗi

$ is undefined

trong bootstrap-carousel.js [dòng 125] và

$ is not a function

trong bootstrap-transition.js [dòng 22 ]

Nguồn

2012-02-19 Atrus

Từ những gì tôi hiểu, $ ('carousel') băng chuyền(); là jQuery để gọi phương thức băng chuyền trên DIV với id = carousel. Vì vậy, tôi đặt nó trong một kịch bản ở phía dưới.Thật không may, điều đó dường như không làm bất cứ điều gì, ngoại trừ việc tạo ra một lỗi khác của '$ không được xác định' – Atrus

Rõ ràng jQuery không được tải chính xác.
Thử tải hai tập lệnh trong trang <head>.

Các mã để chạy băng chuyền là

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

Bạn có thể đặt nó hoặc là ở <head> sau khi hai kịch bản khác
hoặc trong trường hợp kịch bản khác bây giờ.

Nguồn

2012-02-19 21:45:42 TheShellfishMeme

Ugh. Bạn đúng là jQuery không tải đúng. Nó thậm chí không có ở đó. Cảm ơn bạn đã trợ giúp về vị trí đoạn trích js của tôi. – Atrus

Đã xảy ra sự cố tương tự.

Đối với tôi, tôi phải sử dụng jQuery 1.7.1, vì 1.6.4 không hoạt động.
tôi đã phải bao gồm bootstrap-transition

Nguồn

2012-03-25 18:14:59 alex

Tôi đã sử dụng Django's JQuery (Tôi không biết các phiên bản) và nó đã không làm việc. Tuy nhiên, nó hoạt động với Jquery 1.7.1.

Nguồn

2012-06-23 21:41:32

Gần đây đã có cùng một vấn đề, có vẻ như trong phiên bản hiện tại của Bootstrap, bạn cũng phải bao gồm một lớp được gọi là trang trình bày.

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

Nguồn

2012-09-25 23:08:11

Bạn định nghĩa là id không phải là một lớp, Vì vậy, bạn nên bắt đầu băng chuyền bằng mã này của jquery, vì vậy thay

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

thay vì

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

Nguồn

2015-04-16 06:39:42 Mohamm6d

Nếu bạn đang gặp khó khăn nhận được trình chiếu băng chuyền Bootstrap để hoạt động - Đây là mẫu có các điều khiển có thể định vị và thanh điều hướng tiến trình ở dưới cùng theo dõi các trang trình bày. .

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

Nguồn

2017-03-10 00:57:03 TheNickelDime

Bootstrap Carousel Không hoạt động

Trả lời

Các vấn đề liên quan