मुख्य सामग्रीवर जा डॉक्स नेव्हिगेशनवर जा
Check
in English

कॅरोसेल

घटकांद्वारे सायकल चालवण्यासाठी स्लाइडशो घटक—चित्र किंवा मजकूराच्या स्लाइड्स—कॅरोसेलसारखे.

या पृष्ठावर

हे कसे कार्य करते

कॅरोसेल हा CSS 3D ट्रान्सफॉर्म्स आणि थोडा JavaScript सह तयार केलेल्या सामग्रीच्या मालिकेद्वारे सायकलिंगसाठी एक स्लाइड शो आहे. हे प्रतिमा, मजकूर किंवा सानुकूल मार्कअपच्या मालिकेसह कार्य करते. यात मागील/पुढील नियंत्रणे आणि निर्देशकांसाठी समर्थन देखील समाविष्ट आहे.

ब्राउझरमध्ये जेथे पृष्ठ दृश्यमानता API समर्थित आहे, कॅरोसेल वापरकर्त्याला वेबपृष्ठ दृश्यमान नसताना सरकणे टाळेल (जसे की जेव्हा ब्राउझर टॅब निष्क्रिय असतो, ब्राउझर विंडो लहान केली जाते, इ.).

या घटकाचा अॅनिमेशन प्रभाव 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>

नियंत्रणांसह

मागील आणि पुढील नियंत्रणांमध्ये जोडत आहे. आम्ही घटक वापरण्याची शिफारस करतो, परंतु तुम्ही यासह घटक <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>

पुढील आयटमवर स्वयंचलितपणे सायकलिंग दरम्यान विलंब होण्याची वेळ बदलण्यासाठी 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>

सानुकूल संक्रमण

जर तुम्ही संकलित 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"तुम्ही तुमचे कॅरोसेल सुरू करण्यासाठी वापरत नसल्यास , तुम्हाला ते स्वतः सुरू करावे लागेल. हे समान कॅरोसेलच्या (अनावश्यक आणि अनावश्यक) स्पष्ट JavaScript इनिशिएलायझेशनसह संयोजनात वापरले जाऊ शकत नाही.

JavaScript द्वारे

यासह कॅरोसेलला मॅन्युअली कॉल करा:

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

पर्याय

data-bs-पर्याय डेटा विशेषता किंवा JavaScript द्वारे पास केले जाऊ शकतात म्हणून, तुम्ही मध्ये पर्याय नाव जोडू शकता data-bs-animation="{value}". डेटा विशेषतांद्वारे पर्याय पास करताना पर्याय नावाचा केस प्रकार “ camelCase ” वरून “ kebab-case ” मध्ये बदलण्याची खात्री करा. उदाहरणार्थ, 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 कॅरोसेलने सतत सायकल चालवली पाहिजे की कठीण थांबे आहेत.

पद्धती

असिंक्रोनस पद्धती आणि संक्रमणे

सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .

अधिक माहितीसाठी आमचे JavaScript दस्तऐवजीकरण पहा .

तुम्ही कॅरोसेल कन्स्ट्रक्टरसह कॅरोसेल उदाहरण तयार करू शकता, उदाहरणार्थ, अतिरिक्त पर्यायांसह प्रारंभ करण्यासाठी आणि आयटममधून सायकल चालवणे सुरू करा:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
पद्धत वर्णन
cycle कॅरोसेल आयटममधून डावीकडून उजवीकडे सायकल.
dispose घटकाचे कॅरोसेल नष्ट करते. (DOM घटकावरील संचयित डेटा काढून टाकते)
getInstance स्टॅटिक पद्धत जी तुम्हाला DOM घटकाशी संबंधित कॅरोसेल उदाहरण मिळविण्याची परवानगी देते, तुम्ही ते याप्रमाणे वापरू शकता: bootstrap.Carousel.getInstance(element).
getOrCreateInstance स्टॅटिक पद्धत जी डीओएम घटकाशी संबंधित कॅरोसेल उदाहरण देते किंवा ते प्रारंभ केले नसल्यास नवीन तयार करते. आपण ते याप्रमाणे वापरू शकता: 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...
})