मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

हिंडोळ

घटकां मदल्यान सायकल करपा खातीर स्लाइडशो घटक-मजकूराचीं प्रतिमा वा स्लाइड-हिंडोला सारको.

ह्या पानाचेर

कशें काम करता

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

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

ह्या घटकाचो एनिमेशन परिणाम prefers-reduced-motionमाध्यम क्वेरीचेर आदारून आसता. आमच्या सुलभताय दस्तावेजीकरणाचो उणो केल्ली गती विभाग पळयात .

उपकार करून लक्षांत दवरात की नेस्टेड हिंडोळां समर्थीत नात, आनी हिंडोला सादारणपणान सुलभताय मानकांक पाळो दिना.

उदारण

हिंडोळ आपोआप स्लाइड परिमाण सामान्य करिनात. अशे तरेन, तुमकां सामुग्रीचो योग्य आकार दिवपाक अतिरिक्त उपयुक्तताय वा सानुकूल शैली वापरच्यो पडटल्यो. हिंडोळ फाटल्या/फुडल्या नियंत्रणांक आनी निर्देशकांक तेंको दिता आसतना, तांची स्पश्ट गरज ना. तुमकां योग्य दिसता तशें जोडचें आनी पसंतीचें करचें.

.activeवर्ग एका स्लाइडांत जोडपाची गरज आसा नाजाल्यार हिंडोळो दिसचो ना. तशेंच पर्यायी नियंत्रणां खातीर एक खाशेलो सेट करपाची खात्री करात id, .carouselखास करून तुमी एकाच पानाचेर जायते हिंडोळ वापरतात जाल्यार. नियंत्रण आनी निर्देशक घटकांक घटकाच्या कडेन जुळपी data-bs-targetगुणधर्म (वा दुव्यां खातीर) आसपाक जाय.hrefid.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नियंत्रणां तांच्या मुलभूत धव्या भरपा वयल्यान 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 चडांत चड बदलूं येता वा तुमी संकलित केल्लो CSS वापरतात जाल्यार सानुकूल शैलींचो संक्रमण काळ .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 एकाद्र्या घटकाचें हिंडोळ नश्ट करता. (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...
})