मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
Check
in English

हिंडोला

तत्वक कें माध्यम सं साइकिल चलावय कें लेल एकटा स्लाइड शो घटक-पाठ कें छवि या स्लाइड-जैना एक हिंडोला.

इस पेज पर

कोना काज करैत अछि

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

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

एहि घटक क एनीमेशन प्रभाव 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>

अगिला आइटम पर स्वचालित रूप सं साइकिल चलावय कें बीच देरी करय कें लेल समय कें मात्रा बदलय कें 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मे जोड़ू . नियंत्रण क॑ CSS गुण .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>

कस्टम संक्रमण

के संक्रमण अवधि क॑ संकलन स॑ पहल॑ Sass चर स॑ .carousel-itemबदललऽ जाब॑ सकै छै $carousel-transition-durationया कस्टम शैली स॑ अगर आप संकलित CSS क॑ प्रयोग कर॑ रहलऽ छै । यदि अनेक संक्रमण लागू कैल जैत छै, त सुनिश्चित करूं कि परिवर्तन संक्रमण पहिने परिभाषित कैल गेल छै (जैना 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 ” सं “ kabab -case ” मे बदलनाय सुनिश्चित करूं . जेना, के 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 कोनो तत्व के हिंडोला के नष्ट क दैत अछि। (DOM तत्व पर संग्रहीत डेटा हटाबैत अछि)
getInstance स्थिर विधि जे अहां कें कोनों DOM तत्व सं जुड़ल हिंडोला इंस्टेंस प्राप्त करय कें अनुमति देयत छै, अहां एकर उपयोग अइ तरह कयर सकय छी: bootstrap.Carousel.getInstance(element).
getOrCreateInstance स्थिर विधि जे कोनों DOM तत्व सं जुड़ल एकटा हिंडोला इंस्टेंस वापस करयत छै या एकटा नव बनायत छै अगर इ आरंभ नहि कैल गेलय कें स्थिति मे. एकर उपयोग अहां एहि तरहे क सकय छी: 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...
})