2012-06-27 71 views
11

Tôi đang sử dụng bootstrap bởi băng chuyền của Twitter (phiên bản mới nhất) và tôi đã làm việc đó - ngoại trừ việc nó không bắt đầu tự động trượt. Nó hoạt động tốt sau khi bạn nhấp vào một trong các nút điều hướng. Không chắc chắn lý do tại sao nó làm điều này.Bootstrap Carousel Không tự động trượt

Dưới đây là thiết lập của tôi JS trong tiêu đề:

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

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

Cũng vừa mới thêm này không có kết quả:

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

Afte r làm cho sự thay đổi trên, giao diện điều khiển javascript nói:

của router Lỗi Loại: Object # không có phương pháp 'băng chuyền' (chức năng ẩn danh) jquery.min.js b.extend.ready: 29 u

Bất kỳ suy nghĩ về lý do tại sao điều này sẽ không được làm việc?

+0

Bạn đã sử dụng $ ('. Carousel'). Carousel() ở bất kỳ đâu? – user1190992

+0

Chỉ cần cập nhật với tập lệnh đó - nhưng thêm nó đã không giúp –

+0

@WilliamH Hãy chắc chắn rằng bạn thêm javascript ('$ ('. Carousel'). Carousel();') trong một lệnh '$ .document.ready()' . Nếu div không tồn tại khi '.carousel()' được gọi, nó sẽ không tự động. –

Trả lời

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

Nếu vẫn không hoạt động, hãy tìm các lỗi tiềm ẩn trong bảng điều khiển của trình duyệt (firebug/chrome ..).


Đối

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

Hãy chắc chắn rằng:

Chỉ có một jQuery được bao gồm

Chỉ có một bootstrap-carousel.js hoặc bootstrap.js được bao gồm.

jQuery được bao gồm trước, sau đó bootstrap-carousel.js hoặc bootstrap.js, sau đó $ (document) .ready (...

+0

Tôi đã cập nhật câu hỏi với lỗi giao diện điều khiển –

+0

Cảm ơn - nhưng tôi đảm bảo tuân theo chính xác và hiện có lỗi sau : của router Lỗi Loại: Object # không có phương pháp 'băng chuyền' jQuery.Callbacks.fire jquery.js: 1032 jQuery.Callbacks.self.fireWith jquery.js: 1150 jquery.js jQuery.extend.ready: 421 DOMContentLoaded –

+0

Bạn có thể kích hoạt băng chuyền trên lớp .carousel thay vì #myCarousel – baptme

4

Đôi khi sử dụng phiên bản sai của JQuery có thể ảnh hưởng đến các hành động của Twitters Boostrap .. carousel Họ hiện đang chạy v1.7.1, nếu bạn sử dụng khác nhau nó có thể gây ra lỗi

Nếu bạn không chạy v1.7.1 bạn có thể tải về từ đây:

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

Cũng chắc chắc chắn rằng yo mã ur được bao bọc trong tài liệu sẵn sàng:

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

Tốt với bản phát hành cuối cùng 1.7.2, nhưng điểm tốt là +1 – baptme

+0

Cảm ơn - nhưng không có đề xuất giải pháp nào hiệu quả. Tôi đã thay thế jquery hiện tại của mình bằng liên kết 1.7.1 và sử dụng đoạn trích sẵn sàng của tài liệu. –

1

Tôi đã gặp vấn đề tương tự và tìm ra giải pháp; Khi cả hai chúng tôi đặt các javascripts vào cuối trang, sự kêu gọi của hàm phải được đặt sau họ:

<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 }); 
}); 

Đôi khi bạn cần phải đặt tệp JavaScript sau khi uống rượu say. Trên thực tế trước khi kết thúc trang.

Tham chiếu: http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

Mã hóa hạnh phúc. Cảm ơn

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

Trong khi mã này có thể trả lời câu hỏi, cung cấp ngữ cảnh bổ sung về cách thức và/hoặc lý do giải thích vấn đề này sẽ cải thiện giá trị lâu dài của câu trả lời. – kerrin

+0

Cảm ơn. Điều này có thể làm việc vì nó hoạt động trong của tôi. – Shuyaib

0

Nếu bạn đang sử dụng NgRoute và các giải pháp trên không làm việc cho bạn, hãy chắc chắn để bao gồm các mã javascript sau trên đỉnh rất của mẫu NgRoute tiêm vào <ng-view></ng-view>:

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

Cũng đảm bảo rằng jQuery được bao gồm trước khi bootstrap.js được bao gồm. Điều này đã giúp tôi khi tôi gặp vấn đề này trong dự án của tôi.

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