मुख्य सामग्री पर जाओ डॉक्स नेविगेशन पर जाओ
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="carousel">
  <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="carousel">
  <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स्लाइड दी बजाय फीका संक्रमण कन्नै स्लाइड्स गी एनिमेट करने आस्तै अपने हिंडोला च जोड़ो ।

<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=""आस्तै इक च जोड़ो ।.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हेठ दित्ते गेदे उदाहरन च बी एट्रिब्यूट शामल नेईं ऐ ते ऐ data-bs-interval="false"इसलेई एह् ऑटोप्ले नेईं करदा ऐ।

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-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"अपने हिंडोला गी इनिशियलाइज करने लेई इस्तेमाल नेईं करदे ओ तां तुसेंगी अपने आपै गी इनिशियलाइज करना होग। इसदा इस्तेमाल इक गै हिंडोला दे (फालतू ते गैर-जरूरी) स्पश्ट जावास्क्रिप्ट आरंभीकरण कन्नै संयोजन च नेईं कीता जाई सकदा ऐ.

जावास्क्रिप्ट दे जरिए

हिंडोला गी मैन्युअल रूप कन्नै इस कन्नै कॉल करो:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-bs-, च जोड़ो , जिऱयां data-bs-interval="".

नां किसम डिफाल्ट ब्यौरा
interval नंबर 5000 इक आइटम गी स्वतः साइकिल चलाने दे बिच्च देरी करने आस्तै समें दी मात्रा। अगर false, हिंडोला अपने आप चक्कर नेईं करग।
keyboard बूलियन true क्या हिंडोला गी कीबोर्ड दी घटनाएं पर प्रतिक्रिया देनी चाहिदी।
pause तार | बूलियन 'hover'

जेकर सेट कीता गेदा ऐ तां 'hover'हिंडोला दी साइकिलिंग गी रोकदा ऐ mouseenterते हिंडोला दी साइकिलिंग गी चालू करदा ऐ mouseleave. जेकर , पर सेट कीता गेदा ऐ false, तां हिंडोला उप्पर मंडराने कन्नै इसगी रोकना नेईं होग.

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

विधियां

एसिंक्रोनस तरीके ते संक्रमण

सारे एपीआई तरीके एसिंक्रोनस न ते इक संक्रमण शुरू करदे न . संक्रमण शुरू होने दे बाद गै ओह् काल करने आह् ले कोल वापस औंदे न पर खत्म होने थमां पैह् ले . इसदे अलावा, इक संक्रमण घटक पर इक विधि काल गी अनदेखा कीता जाग .

होर मती जानकारी आस्तै साढ़े जावास्क्रिप्ट दस्तावेज़ीकरण दिक्खो .

तुस हिंडोला कन्स्ट्रक्टर कन्नै इक हिंडोला इंस्टेंस बनाई सकदे ओ, मसाल दे तौर पर, अतिरिक्त विकल्पें कन्नै शुरू करने ते आइटमें दे राहें साइकिलिंग शुरू करने आस्तै:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
तरीका ब्यौरा
cycle हिंडोला आइटमें दे माध्यम कन्नै बाएं थमां दाएं चक्कर लांदा ऐ।
pause आइटम दे माध्यम कन्नै हिंडोला गी साइकिल चलाने थमां रोकदा ऐ।
prev पिछले आइटम गी चक्र करदा ऐ। पिछली आइटम गी दस्सने थमां पैह् ले (जियां, घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ ।slid.bs.carousel
next अगली आइटम तक चक्र। अगली आइटम गी दस्सने थमां पैह् ले (जियां, घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ ।slid.bs.carousel
nextWhenVisible हिंडोला गी अगले गी साइकल नेईं करो जिसलै पृष्ठ नेईं दिक्खेआ जा जां हिंडोला जां ओह्दे माता-पिता नेईं दिक्खे जा। लक्ष्य आइटम गी दस्सने थमां पैह् ले कॉलर गी वापस करदा ऐ
to हिंडोला गी इक खास फ्रेम (0 आधारत, इक सरणी दे समान) च चक्र करदा ऐ। लक्ष्य आइटम गी दस्सने थमां पैह् ले (जियां, घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ ।slid.bs.carousel
dispose इक तत्व दे हिंडोला गी नष्ट करदा ऐ। (डीओएम तत्व पर संग्रहीत डेटा गी हटांदा ऐ)
getInstance स्थिर विधि जेह् ड़ी तुसेंगी इक DOM तत्व कन्नै जुड़ी दी हिंडोला इंस्टेंस हासल करने दी इजाजत दिंदी ऐ , तुस इसदा इस चाल्ली इस्तेमाल करी सकदे ओ :bootstrap.Carousel.getInstance(element)
getOrCreateInstance स्थिर विधि जेह् ड़ी इक DOM तत्व कन्नै जुड़े दा इक हिंडोला इंस्टेंस रिटर्न करदी ऐ जां इक नमां बनांदी ऐ इस मामले च एह् आरंभ नेईं कीता गेआ हा. तुस इसदा इस्तेमाल इस चाल्ली करी सकदे ओ:bootstrap.Carousel.getOrCreateInstance(element)

घटनाएं

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

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

सारे ��िंडोला घटनाएं गी हिंडोला पर गै (यानी पर <div class="carousel">) फायर कीता जंदा ऐ ।

घटना दा प्रकार ब्यौरा
slide.bs.carousel slideइंस्टेंस विधि गी आह् नने पर तुरत फायर करदा ऐ।
slid.bs.carousel जदूं हिंडोला ने अपना स्लाइड संक्रमण पूरा कीता ऐ तां फायर कीता गेआ। 
var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})