हिंडोला

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

इस पृष्ठ पर

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

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

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

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

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

उदाहरण

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

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

केवल स्लाइड

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

एचटीएमएल

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

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

एचटीएमएल

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

कैप्शन के साथ

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

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

पहली स्लाइड के लिए कुछ प्रतिनिधि प्लेसहोल्डर सामग्री।

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

दूसरी स्लाइड के लिए कुछ प्रतिनिधि प्लेसहोल्डर सामग्री।

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

तीसरी स्लाइड के लिए कुछ प्रतिनिधि प्लेसहोल्डर सामग्री।

एचटीएमएल

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

क्रॉसफ़ेड

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

एचटीएमएल

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

व्यक्तिगत `.carousel-item`अंतराल

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

एचटीएमएल

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

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

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

एचटीएमएल

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

डार्क वेरिएंट

गहरे रंग के नियंत्रणों, संकेतकों और कैप्शन .carousel-darkके लिए जोड़ें । सीएसएस संपत्ति .carouselके साथ उनके डिफ़ॉल्ट सफेद भरण से नियंत्रणों को उलट दिया गया है। filterकैप्शन और नियंत्रण में अतिरिक्त Sass चर होते हैं जो colorऔर को अनुकूलित करते हैं background-color।

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

पहली स्लाइड के लिए कुछ प्रतिनिधि प्लेसहोल्डर सामग्री।

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

दूसरी स्लाइड के लिए कुछ प्रतिनिधि प्लेसहोल्डर सामग्री।

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

तीसरी स्लाइड के लिए कुछ प्रतिनिधि प्लेसहोल्डर सामग्री।

एचटीएमएल

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

कस्टम ट्रांजिशन

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

सास

चर

सभी कैरोसेल के लिए वैरिएबल:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

डार्क कैरोसेल के लिए वैरिएबल :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

प्रयोग

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

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

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

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

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

const carousel = new bootstrap.Carousel('#myCarousel')

विकल्प

चूंकि विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं, आप विकल्प नाम को में जोड़ सकते हैं data-bs-, जैसा कि में है data-bs-animation="{value}"। डेटा विशेषताओं के माध्यम से विकल्पों को पास करते समय केस प्रकार के विकल्प नाम को " CamelCase " से " कबाब-केस " में बदलना सुनिश्चित करें । उदाहरण के लिए, data-bs-custom-class="beautifier"के बजाय उपयोग करें data-bs-customClass="beautifier"।

बूटस्ट्रैप 5.2.0 के अनुसार, सभी घटक एक प्रयोगात्मक आरक्षित डेटा विशेषता data-bs-configका समर्थन करते हैं जो JSON स्ट्रिंग के रूप में सरल घटक कॉन्फ़िगरेशन को रख सकता है। जब किसी तत्व में data-bs-config='{"delay":0, "title":123}'और data-bs-title="456"विशेषताएँ होती हैं, तो अंतिम titleमान होगा 456और अलग डेटा विशेषताएँ पर दिए गए मानों को ओवरराइड कर देंगी data-bs-config। इसके अलावा, मौजूदा डेटा विशेषताएँ JSON मान जैसे data-bs-delay='{"show":0,"hide":150}'.

नाम	टाइप	चूक	विवरण
`interval`	संख्या	`5000`	किसी आइटम को स्वचालित रूप से साइकिल चलाने के बीच देरी के लिए समय की मात्रा।
`keyboard`	बूलियन	`true`	कैरोसेल को कीबोर्ड इवेंट पर प्रतिक्रिया देनी चाहिए या नहीं।
`pause`	स्ट्रिंग, बूलियन	`"hover"`	अगर सेट किया जाता है `"hover"`, तो कैरोसेल की साइकिलिंग को चालू कर देता है `mouseenter`और कैरोसेल की साइकिलिंग को फिर से चालू कर देता है `mouseleave`। अगर पर सेट किया जाता है `false`, तो कैरोसेल पर होवर करने से वह रुकेगा नहीं. स्पर्श-सक्षम उपकरणों पर, जब पर सेट किया जाता है , साइकिल चलाना स्वचालित रूप से फिर से शुरू होने से पहले, दो अंतरालों के लिए (उपयोगकर्ता द्वारा हिंडोला के साथ इंटरैक्ट करना समाप्त करने के बाद) `"hover"`रुक जाएगा । `touchend`यह माउस व्यवहार के अतिरिक्त है।
`ride`	स्ट्रिंग, बूलियन	`false`	यदि पर सेट किया जाता है `true`, तो उपयोगकर्ता द्वारा पहले आइटम को मैन्युअल रूप से चक्रित करने के बाद हिंडोला स्वतः चलता है। अगर पर सेट किया जाता है `"carousel"`, तो लोड होने पर कैरोसेल अपने आप चलता है.
`touch`	बूलियन	`true`	क्या कैरोसल को टचस्क्रीन डिवाइस पर बाएं/दाएं स्वाइप इंटरैक्शन का समर्थन करना चाहिए।
`wrap`	बूलियन	`true`	क्या कैरोसेल को लगातार साइकिल चलाना चाहिए या हार्ड स्टॉप होना चाहिए।

तरीकों

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

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

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

आप कैरोसेल कंस्ट्रक्टर के साथ एक कैरोसेल इंस्टेंस बना सकते हैं, उदाहरण के लिए, अतिरिक्त विकल्पों के साथ इनिशियलाइज़ करने के लिए और आइटम्स के माध्यम से साइकिल चलाना शुरू करने के लिए:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

तरीका	विवरण
`cycle`	हिंडोला आइटम के माध्यम से बाएं से दाएं साइकिल।
`dispose`	किसी तत्व के कैरोसेल को नष्ट कर देता है। (डीओएम तत्व पर संग्रहीत डेटा हटा देता है)
`getInstance`	स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े कैरोसेल इंस्टेंस प्राप्त करने की अनुमति देती है, आप इसे इस तरह उपयोग कर सकते हैं `bootstrap.Carousel.getInstance(element)`:।
`getOrCreateInstance`	स्टेटिक विधि जो एक डोम तत्व से जुड़े कैरोसेल इंस्टेंस को लौटाती है या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाएं। आप इसे इस तरह इस्तेमाल कर सकते हैं `bootstrap.Carousel.getOrCreateInstance(element)`:।
`next`	अगले आइटम के लिए साइकिल। अगला आइटम दिखाए जाने से पहले कॉलर पर वापस आ जाता है (उदाहरण के लिए, `slid.bs.carousel`घटना होने से पहले)।
`nextWhenVisible`	जब पृष्ठ दिखाई नहीं दे रहा हो या हिंडोला या उसका पैरेंट दिखाई नहीं दे रहा हो, तो कैरोसेल को अगले पर न लगाएं। लक्ष्य आइटम दिखाए जाने से पहले कॉलर पर वापस आ जाता है ।
`pause`	हिंडोला को आइटम के माध्यम से साइकिल चलाने से रोकता है।
`prev`	पिछले आइटम के लिए साइकिल। पिछले आइटम को दिखाए जाने से पहले कॉलर पर वापस आ जाता है (उदाहरण के लिए, `slid.bs.carousel`घटना होने से पहले)।
`to`	हिंडोला को एक विशेष फ्रेम (0 आधारित, एक सरणी के समान) पर साइकिल करता है। लक्ष्य आइटम दिखाए जाने से पहले कॉलर पर वापस आ जाता है (उदाहरण के लिए, `slid.bs.carousel`घटना होने से पहले)।

आयोजन

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

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

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

घटना प्रकार	विवरण
`slid.bs.carousel`	कैरोसेल द्वारा अपना स्लाइड ट्रांज़िशन पूरा कर लेने पर सक्रिय किया गया।
`slide.bs.carousel`	`slide`इंस्टेंस विधि लागू होने पर तुरंत आग लगती है।

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

हिंडोला

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

उदाहरण

केवल स्लाइड

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

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

कैप्शन के साथ

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

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

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

क्रॉसफ़ेड

व्यक्तिगत .carousel-itemअंतराल

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

डार्क वेरिएंट

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

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

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

कस्टम ट्रांजिशन

सास

चर

प्रयोग

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

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

विकल्प

तरीकों

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

आयोजन

व्यक्तिगत `.carousel-item`अंतराल