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