मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
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>

नियन्त्रणैः सह

पूर्वे परे च नियन्त्रणे योजयित्वा । वयं elements इत्यस्य उपयोगं अनुशंसयामः , परन्तु भवान् elements इत्यनेन सह <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नियन्त्रणानि तेषां पूर्वनिर्धारितशुक्लपूरणात् filterCSS गुणेन सह उल्टानि कृतानि सन्ति । कैप्शन्स् तथा नियन्त्रणेषु अतिरिक्ताः 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 attributes इत्यस्य उपयोगं कुर्वन्तु । 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 attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र 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 एकस्य तत्त्वस्य हिंडोला नष्टं करोति। (DOM तत्वे संगृहीतदत्तांशं निष्कासयति)
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...
})