हिंडोला

तत्त्वानां माध्यमेन चक्रं कर्तुं स्लाइड् शो घटकः-पाठस्य चित्राणि वा स्लाइड् वा-हिंडोला इव ।

इस पृष्ठ पर

कथं कार्यं करोति

हिंडोला सामग्रीश्रृङ्खलायाम् माध्यमेन सायक्लिंग् कर्तुं स्लाइड् शो अस्ति, CSS 3D परिवर्तनैः सह निर्मितम् अस्ति तथा च किञ्चित् जावास्क्रिप्ट् इत्यनेन सह निर्मितम् अस्ति । इदं चित्राणां, पाठस्य, अथवा कस्टम् मार्कअपस्य श्रृङ्खलाया सह कार्यं करोति । अस्मिन् पूर्व/अनन्तरनियन्त्रणानां सूचकानाम् च समर्थनम् अपि अन्तर्भवति ।

ब्राउजर् मध्ये यत्र पृष्ठदृश्यता एपिआइ समर्थितम् अस्ति, तत्र हिंडोला स्खलनं परिहरिष्यति यदा जालपुटं उपयोक्त्रे न दृश्यते (यथा यदा ब्राउजर् ट्याब् निष्क्रियः भवति, ब्राउजर् विण्डो न्यूनतमः भवति इत्यादि)

अस्य घटकस्य एनिमेशन-प्रभावः prefers-reduced-motionमीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

कृपया अवगच्छन्तु यत् नेस्टेड् हिंडोलाः समर्थिताः न सन्ति, तथा च हिंडोलाः सामान्यतया सुलभतामानकानां अनुरूपाः न भवन्ति ।

उदाहरण

हिंडोलाः स्वयमेव स्लाइड् आयामान् सामान्यं न कुर्वन्ति । तथा च, सामग्रीं समुचितरूपेण आकारयितुं भवद्भिः अतिरिक्त-उपयोगितायाः अथवा अनुकूलित-शैल्याः उपयोगः करणीयः भवेत् । यदा हिंडोलाः पूर्व/अग्रे नियन्त्रणानि सूचकानि च समर्थयन्ति तथापि तेषां स्पष्टतया आवश्यकता नास्ति । यथायोग्यं योजयन्तु अनुकूलितं च कुर्वन्तु।

वर्गं एकस्मिन् स्लाइड् मध्ये .activeयोजयितुं आवश्यकम् अन्यथा हिंडोला न दृश्यते । अपि च वैकल्पिकनियन्त्रणानां कृते एकं अद्वितीयं सेट् अवश्यं कुर्वन्तु id, .carouselविशेषतः यदि भवान् एकस्मिन् पृष्ठे बहुविधहिंडोलाः उपयुज्यते। नियन्त्रणं सूचकतत्त्वेषु च एकं data-bs-targetविशेषता (अथवा लिङ्कानां कृते) भवितुमर्हति यत् तत्त्वस्य hrefमेलनं करोति ।id.carousel

स्लाइड्स् एव

अत्र केवलं स्लाइड्-युक्तं हिंडोला अस्ति । ब्राउजर् पूर्वनिर्धारितचित्रसंरेखणं निवारयितुं हिंडोलाचित्रेषु .d-blockतथा च उपस्थितिम् अवलोकयन्तु ।.w-100

html

<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"

html

<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>

सूचकैः सह

नियन्त्रणानां पार्श्वे अपि हिंडोले सूचकाः योजयितुं शक्नुवन्ति ।

html

<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.

प्रथमं स्लाइड् लेबलम्

प्रथमस्लाइड् कृते केचन प्रतिनिधिस्थानधारकसामग्री।

द्वितीयं स्लाइड् लेबलम्

द्वितीयस्लाइड् कृते केचन प्रतिनिधिस्थानधारकसामग्री।

तृतीय स्लाइड लेबल

तृतीयस्लाइड् कृते केचन प्रतिनिधिस्थानधारकसामग्री।

html

<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

html

<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>

व्यक्तिगत `.carousel-item`अन्तराल

अग्रिम-वस्तुं प्रति स्वयमेव सायक्लिंग्-करणस्य मध्ये विलम्बस्य समयस्य परिमाणं परिवर्तयितुं data-bs-interval=""a मध्ये योजयन्तु ।.carousel-item

html

<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विशेषता न समाविष्टा अस्ति अतः स्वयमेव न भवति ।

html

<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योजयन्तु । .carouselनियन्त्रणानि तेषां पूर्वनिर्धारितशुक्लपूरणात् filterCSS गुणेन सह उल्टानि कृतानि सन्ति । कैप्शन्स् तथा नियन्त्रणेषु अतिरिक्ताः Sass चराः सन्ति ये colorतथा background-color.

प्रथमं स्लाइड् लेबलम्

प्रथमस्लाइड् कृते केचन प्रतिनिधिस्थानधारकसामग्री।

द्वितीयं स्लाइड् लेबलम्

द्वितीयस्लाइड् कृते केचन प्रतिनिधिस्थानधारकसामग्री।

तृतीय स्लाइड लेबल

तृतीयस्लाइड् कृते केचन प्रतिनिधिस्थानधारकसामग्री।

html

<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"यदि भवान् स्वस्य हिंडोलाम् आरम्भयितुं न उपयुङ्क्ते तर्हि भवान् स्वयमेव आरम्भं कर्तुं अर्हति । एकस्यैव हिंडोलायाः (अनावश्यकं च अनावश्यकं च) स्पष्टजावास्क्रिप्ट् आरम्भीकरणेन सह संयोजनेन तस्य उपयोगः कर्तुं न शक्यते ।

जावास्क्रिप्ट् मार्गेण

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

const carousel = new bootstrap.Carousel('#myCarousel')

विकल्पाः

यतः विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते, भवान् विकल्पनाम योजयितुं शक्नोति data-bs-, यथा data-bs-animation="{value}". data attributes मार्गेण विकल्पान् पारयन्ते सति विकल्पनामस्य case type “ camelCase ” तः “ kebab-case ” इति परिवर्तयितुं सुनिश्चितं कुर्वन्तु । यथा - इत्यस्य data-bs-custom-class="beautifier"स्थाने प्रयोगं कुर्वन्तु data-bs-customClass="beautifier"।

Bootstrap 5.2.0 तः, सर्वे घटकाः प्रयोगात्मकं आरक्षितदत्तांशविशेषणं समर्थयन्ति data-bs-configयत् सरलघटकविन्यासं JSON स्ट्रिंग् रूपेण स्थापयितुं शक्नोति । यदा कस्यचित् तत्त्वस्य data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes भवति तदा अन्तिममूल्यं titleभविष्यति 456तथा च पृथक् data attributes इत्यत्र दत्तानि मूल्यानि अधिलिखिष्यन्ति 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`	Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`nextWhenVisible`	Don’t cycle carousel to next when the page isn’t visible or the carousel or its parent isn’t visible. Returns to the caller before the target item has been shown.
`pause`	Stops the carousel from cycling through items.
`prev`	Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`to`	Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the `slid.bs.carousel` event occurs).

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event type	Description
`slid.bs.carousel`	यदा हिंडोला स्वस्य स्लाइड् संक्रमणं सम्पन्नं करोति तदा प्रज्वलितम्।
`slide.bs.carousel`	`slide`दृष्टान्तविधिः आह्वानं कृत्वा तत्क्षणमेव अग्निम् करोति ।

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

हिंडोला

कथं कार्यं करोति

उदाहरण

स्लाइड्स् एव

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

सूचकैः सह

कैप्शन सहित

प्रथमं स्लाइड् लेबलम्

द्वितीयं स्लाइड् लेबलम्

तृतीय स्लाइड लेबल

क्रॉसफेड

व्यक्तिगत .carousel-itemअन्तराल

स्पर्श स्वाइपिंग अक्षम करें

अन्धकारमय रूपान्तर

प्रथमं स्लाइड् लेबलम्

द्वितीयं स्लाइड् लेबलम्

तृतीय स्लाइड लेबल

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

सस्स

चर

प्रयोगः

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् मार्गेण

विकल्पाः

विधियाँ

अतुल्यकालिक विधियाँ एवं संक्रमण

Events

व्यक्तिगत `.carousel-item`अन्तराल