मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

हिंडोला

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

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

हिंडोला सामग्री की एक श्रृंखला के माध्यम से साइकिल चलाने के लिए एक स्लाइड शो है, जिसे 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="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=""लिए 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नीचे दिए गए उदाहरण में भी विशेषता शामिल नहीं है और 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के लिए जोड़ें । सीएसएस संपत्ति .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"अपने हिंडोला को प्रारंभ करने के लिए उपयोग नहीं करते हैं, तो आपको इसे स्वयं प्रारंभ करना होगा। इसका उपयोग (अनावश्यक और अनावश्यक) एक ही हिंडोला के स्पष्ट जावास्क्रिप्ट आरंभीकरण के संयोजन में नहीं किया जा सकता है।

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

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

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 स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े कैरोसेल इंस्टेंस प्राप्त करने की अनुमति देती है, आप इसे इस तरह उपयोग कर सकते हैं:bootstrap.Carousel.getInstance(element)
getOrCreateInstance स्टेटिक विधि जो एक डोम तत्व से जुड़े कैरोसेल इंस्टेंस को लौटाती है या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाएं। आप इसे इस तरह इस्तेमाल कर सकते हैं: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...
})