in English

हिंडोला

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

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

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

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

इस घटक का एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर है। हमारे एक्सेसिबिलिटी डॉक्यूमेंटेशन का रिड्यूस्ड मोशन सेक्शन देखें ।

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

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

उदाहरण

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

.activeकक्षा को किसी एक स्लाइड में जोड़ने की आवश्यकता है अन्यथा हिंडोला दिखाई नहीं देगा। idवैकल्पिक नियंत्रणों के लिए एक अद्वितीय सेट करना भी सुनिश्चित करें .carousel, खासकर यदि आप एक पृष्ठ पर एकाधिक कैरोसेल का उपयोग कर रहे हैं। नियंत्रण और संकेतक तत्वों में एक data-targetविशेषता (या hrefलिंक के लिए) होनी चाहिए जो तत्व idसे मेल खाती हो .carousel।

केवल स्लाइड

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

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

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

पिछले और अगले नियंत्रणों में जोड़ना। हम <button>तत्वों का उपयोग करने की सलाह देते हैं, लेकिन आप <a>के साथ तत्वों का भी उपयोग कर सकते हैं role="button"।

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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 src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

कैप्शन के साथ

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

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

क्रॉसफ़ेड

.carousel-fadeस्लाइड के बजाय फ़ेड ट्रांज़िशन के साथ स्लाइड को एनिमेट करने के लिए अपने हिंडोला में जोड़ें । आपकी हिंडोला सामग्री (उदाहरण के लिए, केवल पाठ स्लाइड) के आधार पर, आप उचित क्रॉसफ़ेडिंग के लिए s .bg-bodyमें कुछ कस्टम CSS जोड़ना चाह सकते हैं ।.carousel-item

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

अगले आइटम पर स्वचालित रूप से साइकिल चलाने के बीच विलंब के समय को बदलने के data-interval=""लिए a में जोड़ें ।.carousel-item

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

स्पर्श स्वाइप अक्षम करें

हिंडोला स्लाइड के बीच स्थानांतरित करने के लिए टचस्क्रीन उपकरणों पर बाएं/दाएं स्वाइप करने का समर्थन करता है। data-touchइसे विशेषता का उपयोग करके अक्षम किया जा सकता है। data-rideनीचे दिए गए उदाहरण में भी विशेषता शामिल नहीं है और data-interval="false"इसलिए यह ऑटोप्ले नहीं करता है।

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

प्रयोग

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

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

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

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

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

$('.carousel').carousel()

विकल्प

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

नाम टाइप चूक विवरण
मध्यान्तर संख्या 5000 किसी आइटम को स्वचालित रूप से साइकिल चलाने के बीच देरी के लिए समय की मात्रा। यदि false, हिंडोला स्वचालित रूप से चक्रित नहीं होगा।
कीबोर्ड बूलियन सच कैरोसेल को कीबोर्ड इवेंट पर प्रतिक्रिया देनी चाहिए या नहीं।
रोकना स्ट्रिंग | बूलियन 'होवर'

अगर सेट किया जाता है 'hover', तो कैरोसेल की साइकिलिंग को चालू कर देता है mouseenterऔर कैरोसेल की साइकिलिंग को फिर से चालू कर देता है mouseleave। अगर पर सेट किया जाता है false, तो कैरोसेल पर होवर करने से वह रुकेगा नहीं.

स्पर्श-सक्षम उपकरणों पर, जब पर सेट किया जाता है 'hover', साइकिल चलाना स्वचालित रूप से फिर से शुरू होने से पहले दो अंतरालों के लिए रुक जाएगा touchend(एक बार जब उपयोगकर्ता कैरोसेल के साथ इंटरैक्ट करना समाप्त कर देता है)। ध्यान दें कि यह उपरोक्त माउस व्यवहार के अतिरिक्त है।
सवारी डोरी असत्य उपयोगकर्ता द्वारा पहले आइटम को मैन्युअल रूप से साइकिल करने के बाद हिंडोला ऑटोप्ले करता है। अगर पर सेट किया जाता है 'carousel', तो लोड होने पर कैरोसेल अपने आप चलता है.
लपेटना बूलियन सच क्या कैरोसेल को लगातार साइकिल चलाना चाहिए या हार्ड स्टॉप होना चाहिए।
स्पर्श बूलियन सच क्या कैरोसल को टचस्क्रीन डिवाइस पर बाएं/दाएं स्वाइप इंटरैक्शन का समर्थन करना चाहिए।

तरीकों

अतुल्यकालिक तरीके और संक्रमण

सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहले । इसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।

अधिक जानकारी के लिए हमारे जावास्क्रिप्ट दस्तावेज़ देखें ।

.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')

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

.carousel('nextWhenVisible')

जब पृष्ठ दिखाई नहीं दे रहा हो या हिंडोला या उसके पैरेंट दिखाई नहीं दे रहे हों, तो कैरोसेल को आगे की ओर घुमाएँ नहीं। अगला आइटम दिखाए जाने से पहले कॉलर पर वापस आ जाता है (यानी slid.bs.carouselघटना होने से पहले)।

.carousel('to')

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

आयोजन

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

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

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

घटना प्रकार विवरण
स्लाइड.bs.carousel slideइंस्टेंस विधि लागू होने पर यह घटना तुरंत सक्रिय हो जाती है।
slid.bs.carousel यह इवेंट तब सक्रिय होता है जब कैरोसेल ने अपना स्लाइड ट्रांज़िशन पूरा कर लिया हो। 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

संक्रमण अवधि बदलें

यदि आप संकलित CSS का उपयोग कर रहे हैं, तो संकलन या कस्टम शैलियों से पहले Sass चर के साथ की संक्रमण अवधि को .carousel-itemबदला जा सकता है । $carousel-transitionयदि एकाधिक संक्रमण लागू होते हैं, तो सुनिश्चित करें कि परिवर्तन संक्रमण पहले परिभाषित किया गया है (उदाहरण के लिए transition: transform 2s ease, opacity .5s ease-out)।