twitter-bootstrap
carousels

टिप्पणियों

मूल HTML उपयोग

एक बूटस्ट्रैप हिंडोला एक बूटस्ट्रैप घटक है जो एक स्लाइड शो बनाता है जो हिंडोला के भीतर तत्वों के माध्यम से चक्र करता है।

यहाँ एक मूल HTML उपयोग उदाहरण दिया गया है:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

बुनियादी जावास्क्रिप्ट का उपयोग और आरंभीकरण

हिंडोला घटकों को फ़ंक्शन $('.carousel').carousel(options) साथ jQuery के माध्यम से त्वरित किया जा सकता है $('.carousel').carousel(options) , जहां $('.carousel') विशिष्ट हिंडोला के लिए एक शीर्ष-स्तरीय संदर्भ है और options एक हिंडोला वस्तु है जो हिंडोला की निर्दिष्ट करता है डिफ़ॉल्ट विशेषताएँ।

options ऑब्जेक्ट कई गुणों को परिभाषित करने की अनुमति देता है जो प्रभावित करेगा कि हिंडोला कैसे व्यवहार करता है। इन गुणों को इस प्रकार परिभाषित किया गया है:

• interval संपत्ति एक जावास्क्रिप्ट number प्रकार को स्वीकार करती है जो उपयोगकर्ता को हिंडोला के लिए दिए गए हिंडोला स्लाइड को प्रदर्शित करने की मात्रा को परिभाषित करने की अनुमति देता है। यदि बूलियन मूल्य false है, तो हिंडोला स्वचालित रूप से चक्र नहीं करेगा।
• pause संपत्ति एक जावास्क्रिप्ट string प्रकार को स्वीकार करती है जो कि उपयोगकर्ता के माउस के हिंडोला में प्रवेश करने पर हिंडोला के ऑटोमैटिक साइकलिंग को रोक देती है। डिफ़ॉल्ट (और केवल) मान "होवर" है।
• wrap संपत्ति एक जावास्क्रिप्ट boolean प्रकार को स्वीकार करती है जो एक उपयोगकर्ता को यह निर्धारित करने की अनुमति देता है कि क्या वे किसी दिए गए स्लाइड पर रोक के बिना हिंडोला को लगातार चक्र करना चाहते हैं या नहीं।
• keyboard गुण एक जावास्क्रिप्ट boolean प्रकार को स्वीकार करता है जो उपयोगकर्ता को यह परिभाषित करने की अनुमति देता है कि क्या वे हिंडोला कीबोर्ड घटनाओं पर प्रतिक्रिया देना चाहते हैं या नहीं।

यहाँ मूल जावास्क्रिप्ट उपयोग का एक उदाहरण दिया गया है:

$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });

अन्य बूटस्ट्रैप घटकों की तरह, हिंडोला के विकल्प भी HTML में डेटा विशेषताओं के माध्यम से निर्दिष्ट किए जा सकते हैं।