2012-06-27 25 views
11

Twitter'ın atlı karınca (boot) tarafından kullanıyorum (en yeni sürüm) ve çalışıyorum - otomatik olarak kaymaya başlaması dışında. Gezinme düğmelerinden birini tıkladıktan sonra iyi çalışır. Bunu neden yaptığından emin değilim.Bootstrap Atlıkarınca Otomatik Kaydırmıyor

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

Ve HTML:

İşte benim JS başlığında düzmece

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

:

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

Ayrıca sadece boşuna bu katma Afte r yukarıdaki değişiklik yaparak, javascript konsolu diyor ki:

Yakalanmayan TypeError: 29 u

: Object # hiçbir yöntem 'atlıkarınca' (anonim fonksiyonu) b.extend.ready jquery.min.js vardır Bunun neden işe yaramayacağına dair bir düşünce var mı?

+0

$ ('. Carousel') carousel() herhangi bir yerde kullandınız mı? – user1190992

+0

Sadece bu betikle güncellendi - ancak eklemeye yardımcı olmadı –

+0

@WilliamH Bu javascript'i ("$ ('. Carousel'). Carousel();') bir .document.ready() 'çağrısına eklediğinizden emin olun. . .carousel() işlevi çağrıldığında div yoksa, otomatik olarak geri dönmez. –

cevap

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

hala çalışmıyorsa, tarayıcının (firebug/krom ..) konsolunda potansiyel hataları arayın.


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

için emin olun:

Sadece bir jQuery

Sadece bir önyükleme-carousel.js veya bootstrap.js dahildir

dahildir.

jQuery ilk dahildir, sonra ya bootstrap.js sonra $ (document) .ready (...-carousel.js bootstrap

+0

Ben –

+0

konsol hatası ile soru güncellendi Teşekkürler - ama ben tam olarak takip ettim ve şimdi aşağıdaki hatayı aldım : Yakalanmayan TypeError: 1032 jQuery.Callbacks.self.fireWith jquery.js:: 1150 jQuery.extend.ready jquery.js: 421 DOMContentLoaded Object # hiçbir yöntem 'atlıkarınca' jQuery.Callbacks.fire jquery.js vardır –

+0

Carousel'ı, #rousCelusel yerine .carousel sınıfında tetikleyebilir misiniz – baptme

4

Bazen Twitterlar Boostrap eylemlerini etkileyebilir JQuery yanlış sürümünü kullanarak .. senin o hataya neden olabilir farklı kullanılıyorsa atlıkarınca Şu anda, V1.7.1 çalıştıran

senin V1.7.1 çalışmıyorsa Eğer buradan indirebilirsiniz:

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

Ayrıca yapmak tabi ki sen ur kodu bir belgeye hazır:

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

Son sürüm 1.7.2 ile iyi ama iyi puan +1 – baptme

+0

Teşekkürler - ama bu çözüm önerilerinden hiçbiri işe yaramadı. Geçerli jquery'm 1.7.1 bağlantısıyla değiştirdim ve belgeyi hazır snippet'i de kullandım. –

1

Aynı probleminiz vardı ve çözümü buldum; biz de sayfanın sonunda JavaScripts koymak üzere, fonksiyonun arama onlardan sonra koymak gerekir:

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

Bazen cümbüş sonra JavaScript dosyasını koymak gerekir. Aslında sayfanın sonundan önce.

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

mutlu. Teşekkür

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

Bu kod soruyu yanıtlarken, sorunun nasıl ve/veya neden çözüldüğüne ilişkin ek bağlam sağlayarak yanıtın uzun vadeli değerini artıracaktır. – kerrin

+0

Teşekkürler. Bu benim çalışmamda işe yarayabilir. – Shuyaib

0

Eğer NgRoute kullanıyor ve yukarıdaki çözümler, sizin için çalışacak şablonun NgRoute çok üstünde aşağıdaki javascript kodu eklemeyi unutmayın olmadıysa <ng-view></ng-view> içine enjekte:

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

Ayrıca bootstrap.js dahil edilmeden önce jQuery'nin dahil edildiğinden emin olun. Bu, projemde bu sorunu yaşarken bana yardımcı oldu.

İlgili konular