2012-06-27 19 views
11

मैं ट्विटर के कैरोसेल (नवीनतम संस्करण) द्वारा बूटस्ट्रैप का उपयोग कर रहा हूं और मुझे यह काम मिल गया है - सिवाय इसके कि यह स्वचालित रूप से स्लाइड नहीं हो रहा है। नेविगेशन बटनों में से एक पर क्लिक करने के बाद यह अच्छी तरह से काम करता है। यकीन नहीं है कि यह क्यों कर रहा है।बूटस्ट्रैप कैरोसेल स्वचालित रूप से स्लाइड नहीं कर रहा है

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

और एचटीएमएल:

यहाँ शीर्ष लेख में मेरी जे एस सेटअप है

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

इसके अलावा बस कोई लाभ नहीं हुआ इस जोड़ा afte आर ऊपर परिवर्तन करने, जावास्क्रिप्ट कंसोल का कहना है:

Uncaught TypeError: 29 यू

: ऑब्जेक्ट # में कोई विधि 'हिंडोला' (अनाम समारोह) b.extend.ready jquery.min.js है कोई विचार क्यों यह काम नहीं करेगा?

+0

क्या आपने $ ('कैरोसेल') का उपयोग किया है। कैरोसेल() कहीं भी? – user1190992

+0

बस उस स्क्रिप्ट के साथ अपडेट किया गया है - लेकिन इसे जोड़ने से –

+0

@WilliamH मदद नहीं मिली है सुनिश्चित करें कि आप उस जावास्क्रिप्ट ('$ ('। कैरोसेल') को जोड़ दें। कैरोसेल();') '$ .document.ready()' कॉल में । यदि div। अस्तित्व में नहीं है जब '.carousel()' कहा जाता है, तो यह autorotate नहीं होगा। –

उत्तर

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

यदि यह अभी भी काम नहीं कर रहा है, तो ब्राउज़र के (फ़ायरबग/क्रोम ..) कंसोल में संभावित त्रुटियों की तलाश करें।


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

के लिए सुनिश्चित करें:

केवल एक jQuery

केवल एक बूटस्ट्रैप-carousel.js या bootstrap.js शामिल किया गया है शामिल है।

jQuery पहले शामिल किया गया है, तो bootstrap-carousel.js या bootstrap.js, तो $ (document) .ready (...

+0

मैंने कंसोल त्रुटि –

+0

धन्यवाद के साथ प्रश्न अपडेट किया है - लेकिन मैंने इसे ठीक से पालन करना सुनिश्चित किया है और अब निम्न त्रुटि है : Uncaught TypeError: 1032 jQuery.Callbacks.self.fireWith jquery.js:: 1150 jQuery.extend.ready jquery.js: 421 DOMContentLoaded वस्तु # कोई विधि 'हिंडोला' jQuery.Callbacks.fire jquery.js है –

+0

क्या आप #myCarousel – baptme

4

कभी कभी JQuery के गलत संस्करण का उपयोग कर चहचहाना बूटस्ट्रैप के कार्यों को प्रभावित कर सकता ।। हिंडोला वे वर्तमान v1.7.1 चल रहे हैं, यदि आपका विभिन्न त्रुटियों के कारण हो सकता है का उपयोग कर

अपने v1.7.1 नहीं चल रहा है, तो आप इसे यहाँ से डाउनलोड कर सकते हैं:

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

यह भी सुनिश्चित यकीन है कि यो यू कोड तैयार दस्तावेज़ में लपेटा गया है:

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

यह अंतिम रिलीज 1.7.2 के साथ ठीक है, लेकिन अच्छा बिंदु +1 – baptme

+0

धन्यवाद - लेकिन उन समाधान समाधानों में से कोई भी काम नहीं करता है। मैंने अपने वर्तमान jquery को 1.7.1 लिंक के साथ बदल दिया और दस्तावेज़ तैयार स्निपेट का भी उपयोग किया। –

1

मुझे आपकी समस्या थी और समाधान मिला; जैसा कि हम दोनों पृष्ठ के अंत में javascripts शब्दों में कहें, समारोह के फोन करने के बाद उन्हें डाल किया जाना चाहिए:

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

कभी-कभी आप सुरापानोत्सव के बाद JavaScript फ़ाइल डाल करने के लिए की जरूरत है। वास्तव में पृष्ठ के अंत से पहले।

रेफरी: http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

मुबारक कोडिंग। धन्यवाद

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

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, इस बारे में अतिरिक्त संदर्भ प्रदान करता है कि यह कैसे और/या समस्या का समाधान क्यों करता है, इसका जवाब उत्तर के दीर्घकालिक मूल्य में सुधार होगा। – kerrin

+0

धन्यवाद। यह काम कर सकता है क्योंकि यह मेरे काम करता है। – Shuyaib

0

आप NgRoute उपयोग कर रहे हैं और इसके बाद के संस्करण समाधान, आप के लिए काम नहीं किया टेम्पलेट NgRoute के सबसे ऊपरी भाग पर निम्नलिखित जावास्क्रिप्ट कोड शामिल करना सुनिश्चित करें, तो <ng-view></ng-view> में injects:

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

यह भी सुनिश्चित करें कि बूटस्ट्रैप.जेएस शामिल होने से पहले jQuery को पहले शामिल किया गया है। इससे मेरी मदद मिली जब मुझे मेरी परियोजना पर यह समस्या थी।

संबंधित मुद्दे