ट्विटर बूटस्ट्रैप कैरोसेल स्लाइड काम नहीं करता

Question

मैं ट्विटर बूटस्ट्रैप कैरोसेल प्लग को लागू करने की कोशिश कर रहा हूं। यह दिखता है और ऑटो चक्र सही ढंग से, लेकिन वस्तुओं के बीच स्लाइड प्रभाव काम नहीं करता है। यह बस एक आइटम को अगले आइटम के साथ बदल देता है। हालांकि यह कार्यात्मक है, यह आकर्षक यूएक्स से कम है। विचार?

<div class="span7"> 
     <div id="myCarousel" class="carousel slide"> 
      <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="img/CoachellaValley.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 1</h4> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/CoachellaValley2.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 2</h4> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/CoachellaValley3.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 3</h4> 
       </div> 
      </div> 
      </div> 
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
     </div> 
     </div> 
[...] 
<script src="js/bootstrap.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 
<script src="js/bootstrap-carousel.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
    $('#myCarousel').carousel(); 
    }) 
    </script> 

Answer 1

इस प्रयास करें:

सभी निम्नलिखित js स्क्रिप्ट आप अपने दस्तावेज़ में भरी हुई है निकालें:

<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 
<script src="js/bootstrap-carousel.js"></script> 

और सिर्फ इतना है कि एक ही क्रम में निम्नलिखित रखने (jQuery पहले चला जाता है)

<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/bootstrap.js"></script> 

समस्या मुझे विश्वास है कि, एक ही स्क्रिप्ट फ़ाइलों को कई बार लोड करने से अलग एस (बूटस्ट्रैप जेएस फ़ाइल में पहले से ही सभी प्लगइन्स शामिल हैं, इसलिए न्यूनतम संस्करण (इसे अभी उत्पादन के लिए सहेजें) या एकल अलग स्क्रिप्ट फाइलों को शामिल करने की आवश्यकता नहीं है), आप bootstrap.js के अंदर शामिल संक्रमण स्क्रिप्ट लोड नहीं कर रहे हैं आदेश है कि अपनी स्क्रिप्ट में लोड कर रहे हैं की वजह से फाइल।

Answer 2

सौदा अगर मैं हिंडोला कंटेनर के लिए class="carousel" और

$('.carousel').carousel('slide',{interval:1000}); 

उपयोग कर रहा हूँ यह काम करता है एक \ राइट क्लिक छोड़ दिया और काफी ठीक काम करता है के लिए ही है (लेकिन केवल एक समय के लिए)।

हैं उपयोग class="carousel slide" और

$('.carousel .slide').carousel('slide',{interval:1000}); 

तो हिंडोला स्विचिंग लेकिन स्लाइड एनीमेशन प्रभाव के बिना।

Answer 3

थोड़ी देर के लिए इस के साथ संघर्ष करने के बाद मैं एक solution पाया है - तुम सिर्फ

बूटस्ट्रैप-transition.js

और स्लाइड एनीमेशन काम करेंगे शामिल करने के लिए की जरूरत है।

Answer 4

आपका कोड सही है .. अपने सिस्टम इस कोड को ठीक काम कर रहा में ..

वहाँ के बिना "स्लाइड" वर्ग बूटस्ट्रैप 3..But में वर्ग "स्लाइड" के लिए कोई परिभाषा नहीं है, हिंडोला छवियों के साथ बदल जाएगा बाहर किसी भी एनीमेशन प्रभाव ..

आप कोड

<script> 
    $(document).ready(function() { 
     $('.carousel').carousel(); 
    }); 
</script> 

चेक आप कोड में बूटस्ट्रैप सीएसएस & जे एस संदर्भ .. में इस स्क्रिप्ट जोड़ें और भी संदर्भ च के आदेश की जाँच Iles

आप इस आदेश का पालन कर सकते हैं: -

1. bootstrap.css
2. बूटस्ट्रैप-theme.css
3. jQuery-1.9.1।js
4. bootstrap.js

स्क्रिप्ट ब्लॉक के साथ बाहर JQ Library..So काम नहीं करेगा JQ लाइब्रेरी सही ढंग से फाइल जोड़ने ..

और सुनिश्चित करें कि JQ फ़ाइल से पहले स्क्रिप्ट काम कर भरी हुई .. इसके लिए आप अपने पृष्ठ के शीर्ष पर संदर्भ जोड़ सकते हैं

Answer 5

भले ही इस प्रश्न का सफलतापूर्वक उत्तर दिया गया - मैं यहां एक समान समस्या का उत्तर ढूंढ रहा था।

कैरोसेल में मेरा पहला आइटम सामान्य की तरह बाएं स्लाइडिंग था, लेकिन दूसरा आइटम इसके पीछे नहीं था। एक बार जब पहला आइटम स्क्रीन से बाहर हो गया, तो दूसरा आइटम दिखाई देगा, स्लाइड नहीं करेगा। फिर यह गायब हो जाएगा, और पहला आइटम ठीक से स्लाइड करेगा।

यदि आपको यह समस्या हो रही है, तो जांचें कि आपके पास स्थिति नहीं है: सापेक्ष; .item div पर।

मैं कहा कि इसलिए की तरह:

.carousel-inner > .item { 
    position:relative; 
    height:495px; 
} 

बाहर कर देता है चीजों को खराब करता है। स्थिति को हटा रहा है: रिश्तेदार; मुद्दा तय किया। अब स्लाइडिंग चिकनी और सही है।