ट्विटर बूटस्ट्रैप कैरोसेल v2.3.2

Question

लागू करने में मुझे बूटस्ट्रैप कैरोसेल को लागू करने में समस्या हो रही है। क्या कोई निम्नलिखित एचटीएमएल और जेएस देख सकता है और स्लाइड को कार्यान्वित करने के निर्देशों पर मुझे निर्देश दे सकता है। .js को संपादित नहीं किया गया है और शरीर नायक इकाई पर कैरोसेल स्थापित है। क्या मैं कैरोसेल एपीआई लागू करता हूं? मैं .js फ़ाइल में उपयोग कर रहे कैरोसेल को कैसे परिभाषित करूं? धन्यवाद।

<div class="carousel"> 

    <!-- Carousel items --> 
    <div class="carousel-inner"> 

     <!-- Main hero unit for a primary marketing message or call to action --> 
     <div class="hero-unit"> 
     <h1>Hello, world!</h1> 
     <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
     <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> 
     </div> 

    </div>  

<!-- Carousel nav --> 

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

Answer 1

बूटस्ट्रैप Carousel के लिए प्रलेखन यहाँ उपलब्ध है: http://twitter.github.com/bootstrap/javascript.html#carousel

मुझे लगता है कि आप कुछ इस तरह से जोड़ना होगा यह करने के लिए चल रहा है:

<script type="text/javascript"> 
$(function(){ 
    $('.carousel').carousel(); 
}); 
</script> 

Answer 2

मेरे समझ है कि

<div class="carousel"> 

होने की आवश्यकता है

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

जहां आईडी "तीर" है जो भी है।

Answer 3

नोट: इस उत्तर मूल रूप से Bootstrap 2.3.2 के लिए

(संस्करण 3 के साथ काम नहीं कर सकते हैं) किया गया था आप अपनी सभी स्लाइडों और पर कक्षा "सक्रिय" पर वर्ग "आइटम" डाल करने के लिए है पहली स्लाइड यह मेरे लिए काम किया।

<div class="carousel"> 
    <div class="carousel-inner"> 


<!-- your slide --> 

    <div class="hero-unit item active"> 
       <h1>Hello, world!</h1> 
       <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
       <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> 
    </div> 

    </div> 
</div> 

और क्रिस्टोफर की तरह कहा कि आपको इसे शुरू करने के लिए इस फ़ंक्शन का उपयोग करने की आवश्यकता है।

<script type="text/javascript"> 
$(function(){ 
    $('.carousel').carousel(); 
}); 
</script> 

Answer 4

आपके पास अपने उदाहरण कोड में कोई आइटम नहीं है। इसे काम करने के लिए आपको कम से कम दो आइटम होने चाहिए, आपके कैरोसेल-आंतरिक div में।

1. एक दूसरे मद
2. यकीन है कि पहले आइटम सक्रिय वर्ग है बनाने बनाएँ; इस गेंद रोलिंग
3. नंगे कोड इस

की तरह दिखना चाहिए शुरू होता है।

<div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
</div> 

Answer 5

यह बूटस्ट्रैप पर आधारित प्रोटोस्टर टेम्पलेट के साथ जूमला 3.1.1 में है। मुझे कैरोलेल स्वचालित रूप से चक्र के लिए नहीं मिला। यह मेरे लिए काम किया:

, एक कस्टम HTML मॉड्यूल का उपयोग करें इस कोड जोड़ें: की index.php में

<div id="myCarousel" class="carousel slide"> 
    <ol class="carousel-indicators" style="list-style: none;"> 
     <li class="active" data-target="#myCarousel" data-slide-to="0"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Carousel items --> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <img src="images/headers/maple.jpg" alt="imagetext 1" /> 
      <div class="carousel-caption"> 
       <h4>Exampletext 1</h4> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="images/headers/raindrops.jpg" alt="imagetext 2" /> 
      <div class="carousel-caption"> 
       <h4>Exampletext</h4> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="images/headers/windows.jpg" alt="imagetext 3" /> 
      <div class="carousel-caption"> 
       <h4>Exampletext</h4> 
      </div> 
     </div> 
    </div> 

    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
</div> 

<!-- Call Carousel --> 
<script type="text/javascript"> 
(function($){$('.carousel').carousel({ interval: 5000, pause:'hover'}); 
})(jQuery); 
</script> 

यह समायोजन (imgscr, वैकल्पिक पाठ और कैप्शन पाठ अनुकूलित करने के लिए बदल) अपने टेम्पलेट स्क्रिप्ट के बीच संघर्ष को रोकने के लिए है, यह mootools को अक्षम करता है जो कैरोसेल को खोलने और बंद करने के लिए स्लाइड बनाता है स्लाइड:

// CSUTOM disable mootools-more.js 
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-core.js']); 
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-more.js']);