हिंडोला

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

यह काम किस प्रकार करता है

हिंडोला सामग्री की एक श्रृंखला के माध्यम से साइकिल चलाने के लिए एक स्लाइड शो है, जिसे CSS 3D ट्रांसफ़ॉर्म और थोड़ी जावास्क्रिप्ट के साथ बनाया गया है। यह छवियों, टेक्स्ट या कस्टम मार्कअप की एक श्रृंखला के साथ काम करता है। इसमें पिछले/अगले नियंत्रणों और संकेतकों के लिए समर्थन भी शामिल है।

उन ब्राउज़रों में जहां पृष्ठ दृश्यता API समर्थित है, जब उपयोगकर्ता को वेबपृष्ठ दिखाई नहीं देता है (जैसे कि जब ब्राउज़र टैब निष्क्रिय होता है, ब्राउज़र विंडो छोटा होता है, आदि) तो हिंडोला फिसलने से बच जाएगा।

कृपया ध्यान रखें कि नेस्टेड कैरोसेल समर्थित नहीं हैं, और कैरोसेल आमतौर पर एक्सेसिबिलिटी मानकों के अनुरूप नहीं होते हैं।

अंत में, यदि आप स्रोत से हमारी जावास्क्रिप्ट बना रहे हैं, तो इसके लिएutil.js .

उदाहरण

हिंडोला स्वचालित रूप से स्लाइड आयामों को सामान्य नहीं करता है। जैसे, सामग्री को उचित आकार देने के लिए आपको अतिरिक्त उपयोगिताओं या कस्टम शैलियों का उपयोग करने की आवश्यकता हो सकती है। जबकि हिंडोला पिछले/अगले नियंत्रणों और संकेतकों का समर्थन करता है, वे स्पष्ट रूप से आवश्यक नहीं हैं। जैसा आप फिट देखते हैं वैसा ही जोड़ें और अनुकूलित करें।

वैकल्पिक नियंत्रणों के लिए एक अद्वितीय आईडी सेट करना सुनिश्चित करें .carousel, खासकर यदि आप एक पृष्ठ पर एकाधिक कैरोसेल का उपयोग कर रहे हैं।

केवल स्लाइड

यहाँ केवल स्लाइड वाला हिंडोला है। ब्राउज़र डिफ़ॉल्ट छवि संरेखण को रोकने के लिए .d-blockऔर हिंडोला छवियों की उपस्थिति पर ध्यान दें ।.img-fluid

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

नियंत्रण के साथ

पिछले और अगले नियंत्रणों में जोड़ना:

पिछला अगला

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

संकेतकों के साथ

आप नियंत्रणों के साथ-साथ, हिंडोला में संकेतक भी जोड़ सकते हैं।

पिछला अगला

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

कैप्शन के साथ

.carousel-captionकिसी भी तत्व के साथ आसानी से अपनी स्लाइड में कैप्शन जोड़ें .carousel-item। उन्हें छोटे व्यूपोर्ट पर आसानी से छिपाया जा सकता है, जैसा कि नीचे दिखाया गया है, वैकल्पिक प्रदर्शन उपयोगिताओं के साथ । हम उन्हें शुरू में छुपाते हैं .d-noneऔर उन्हें मध्यम आकार के उपकरणों पर वापस लाते हैं .d-md-block।

पहला स्लाइड लेबल

नुल्ला विटे एलीट लिबरो, एक फेरेट्रा ऑग मोलिस इंटरडम।

दूसरा स्लाइड लेबल

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट।

तीसरा स्लाइड लेबल

प्रेज़ेंट कमोडो कर्सस मैग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेटूर।

पिछला अगला

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

प्रयोग

डेटा विशेषताओं के माध्यम से

हिंडोला की स्थिति को आसानी से नियंत्रित करने के लिए डेटा विशेषताओं का उपयोग करें। data-slideखोजशब्दों को स्वीकार करता है prevया next, जो स्लाइड की स्थिति को उसकी वर्तमान स्थिति के सापेक्ष बदल देता है। वैकल्पिक रूप से, data-slide-toकैरोसेल में कच्चे स्लाइड इंडेक्स को पास करने के लिए उपयोग करें data-slide-to="2", जो स्लाइड की स्थिति को से शुरू होने वाले किसी विशेष इंडेक्स में स्थानांतरित करता है 0।

एट्रिब्यूट का data-ride="carousel"उपयोग कैरोसल को पेज लोड होने पर एनिमेटिंग के रूप में चिह्नित करने के लिए किया जाता है। इसका उपयोग (अनावश्यक और अनावश्यक) एक ही हिंडोला के स्पष्ट जावास्क्रिप्ट आरंभीकरण के संयोजन में नहीं किया जा सकता है।

जावास्क्रिप्ट के माध्यम से

कैरोसेल को इसके साथ मैन्युअल रूप से कॉल करें:

$('.carousel').carousel()

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-interval=""।

तरीकों

.carousel(options)

वैकल्पिक विकल्पों के साथ कैरोसेल को प्रारंभ करता है objectऔर आइटम के माध्यम से साइकिल चलाना प्रारंभ करता है।

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

हिंडोला आइटम के माध्यम से बाएं से दाएं साइकिल।

.carousel('pause')

हिंडोला को आइटम के माध्यम से साइकिल चलाने से रोकता है।

.carousel(number)

हिंडोला को एक विशेष फ्रेम (0 आधारित, एक सरणी के समान) पर साइकिल करता है। लक्ष्य आइटम दिखाए जाने से पहले कॉलर पर वापस आ जाता है (यानी slid.bs.carouselघटना होने से पहले)।

.carousel('prev')

पिछले आइटम के लिए साइकिल। पिछले आइटम को दिखाए जाने से पहले कॉलर को रिटर्न (यानी slid.bs.carouselघटना होने से पहले)।

.carousel('next')

अगले आइटम के लिए साइकिल। अगला आइटम दिखाए जाने से पहले कॉलर पर वापस आ जाता है (यानी slid.bs.carouselघटना होने से पहले)।

.carousel('dispose')

किसी तत्व के कैरोसेल को नष्ट कर देता है।

आयोजन

बूटस्ट्रैप का हिंडोला वर्ग हिंडोला कार्यक्षमता में हुक करने के लिए दो घटनाओं को उजागर करता है। दोनों घटनाओं में निम्नलिखित अतिरिक्त गुण हैं:

• direction: हिंडोला जिस दिशा में खिसक रहा है (या तो "left"या "right")।
• relatedTarget: DOM तत्व जिसे सक्रिय आइटम के रूप में जगह में खिसकाया जा रहा है।
• from: वर्तमान वस्तु का सूचकांक
• to: अगले आइटम का सूचकांक

सभी हिंडोला ईवेंट कैरोसेल पर ही (अर्थात <div class="carousel">) पर फ़ायर किए जाते हैं.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})