in English

हिंडोला के बा

तत्व सभ के माध्यम से साइकिल चलावे खातिर एगो स्लाइड शो घटक-टेक्स्ट के छवि भा स्लाइड-जइसे कि हिंडोला।

कइसे काम करेला

हिंडोला सामग्री के एगो श्रृंखला के माध्यम से साइकिल चलावे खातिर एगो स्लाइड शो हवे, जेकरा के CSS 3D ट्रांसफॉर्म आ जावास्क्रिप्ट के बिट के साथ बनावल गइल बा। ई छवि, पाठ, भा कस्टम मार्कअप के एगो श्रृंखला के साथ काम करे ला। एकरा में पिछला/अगिला नियंत्रण आ संकेतक सभ खातिर समर्थन भी शामिल बा।

ब्राउजर सभ में जहाँ पेज विजिबिलिटी एपीआई सपोर्ट कइल जाला, हिंडोला तब फिसलन से बच जाई जब वेबपेज प्रयोगकर्ता के ना लउके (जइसे कि जब ब्राउजर टैब निष्क्रिय होखे, ब्राउजर विंडो के न्यूनतम होखे इत्यादि)।

एह घटक के एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर होला। हमनी के सुलभता दस्तावेज के रिड्यूस्ड मोशन सेक्शन देखल जाव .

कृपया ध्यान दीं कि नेस्टेड हिंडोला सभ के समर्थन ना कइल जाला, आ हिंडोला सभ आमतौर पर सुलभता मानक सभ के अनुरूप ना होलें।

अंत में, अगर रउआ हमनी के जावास्क्रिप्ट स्रोत से बना रहल बानी, त एकरा खातिरutil.js .

उदाहरण

हिंडोला स्लाइड के आयाम के स्वचालित रूप से सामान्य ना करेला। अइसे, सामग्री के उचित आकार देवे खातिर रउआँ के अतिरिक्त उपयोगिता भा कस्टम शैली सभ के इस्तेमाल करे के जरूरत पड़ सके ला। जबकि हिंडोला पिछला/अगिला नियंत्रण आ संकेतक सभ के सपोर्ट करे लें, इनहन के स्पष्ट रूप से जरूरत ना पड़े ला। जइसन लागे ओइसन जोड़ीं आ अनुकूलित करीं.

क्लास के .activeकवनो स्लाइड में जोड़ल जरूरी बा ना त हिंडोला ना लउकी. idसाथ ही वैकल्पिक नियंत्रण खातिर पर एगो यूनिक सेट जरूर करीं .carousel, खासकर अगर रउआ एकही पन्ना पर कई गो हिंडोला के इस्तेमाल कर रहल बानी। नियंत्रण आ संकेतक तत्व सभ में कौनों अइसन data-targetबिसेसता (या लिंक सभ खातिर) होखे के चाहीं जे तत्व के से hrefमेल खाए ।id.carousel

खाली स्लाइड होला

इहाँ एगो हिंडोला बा जवना में खाली स्लाइड बा। ब्राउजर के डिफ़ॉल्ट छवि संरेखण से बचावे खातिर हिंडोला छवि पर .d-blockआ के मौजूदगी पर ध्यान दीं ।.w-100

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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-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-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

संकेतक के साथे बा

रउआँ हिंडोला में संकेतक भी जोड़ सकत बानी, नियंत्रण के साथ, भी।

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

कैप्शन के साथे बा

.carousel-captionकवनो के भीतर तत्व के साथ आसानी से अपना स्लाइड में कैप्शन जोड़ीं .carousel-item. इनहन के छोट व्यूपोर्ट सभ पर आसानी से छिपावल जा सके ला, जइसे कि नीचे देखावल गइल बा, वैकल्पिक डिस्प्ले उपयोगिता सभ के साथ । हमनी के शुरू में एकरा के संगे छिपावेनी जा .d-noneअवुरी मध्यम आकार के डिवाइस प वापस ले आवेनी जा .d-md-block।

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

क्रॉसफेड ​​हो गइल बा

.carousel-fadeस्लाइड के बजाय फीका संक्रमण के साथ स्लाइड के एनिमेट करे खातिर अपना हिंडोला में जोड़ीं । अपना हिंडोला सामग्री के आधार पर (जइसे कि, खाली टेक्स्ट स्लाइड), आप सही क्रॉसफेडिंग खातिर s में .bg-bodyया कुछ कस्टम CSS जोड़ल चाहत होखीं।.carousel-item

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

अगिला आइटम पर स्वचालित रूप से साइकिल चलावे के बीच देरी करे खातिर समय के मात्रा बदले data-interval=""खातिर a में जोड़ीं ।.carousel-item

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

टच स्वाइपिंग के अक्षम करीं

हिंडोला स्लाइड के बीच चले खातिर टचस्क्रीन डिवाइस प बाएँ/दाएँ स्वाइप करे के सपोर्ट करेला। data-touchएकरा के एट्रिब्यूट के इस्तेमाल से अक्षम कइल जा सके ला। data-rideनीचे दिहल उदाहरण में भी एट्रिब्यूट शामिल नइखे आ बा data-interval="false"एह से ई ऑटोप्ले ना करे ला।

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

प्रयोग के बारे में बतावल गइल बा

डेटा विशेषता के माध्यम से कइल जाला

हिंडोला के स्थिति के आसानी से नियंत्रित करे खातिर डेटा विशेषता के इस्तेमाल करीं। data-slideकीवर्ड prevया next, के स्वीकार करेला, जवन स्लाइड के स्थिति के ओकर वर्तमान स्थिति के सापेक्ष बदल देला। वैकल्पिक रूप से, data-slide-toहिंडोला में कच्चा स्लाइड इंडेक्स पास करे खातिर इस्तेमाल करीं data-slide-to="2", जवन स्लाइड के स्थिति के एगो खास इंडेक्स में शिफ्ट क देला जवन से शुरू होला 0।

एट्रिब्यूट के data-ride="carousel"इस्तेमाल पन्ना लोड से शुरू होखे वाला हिंडोला के एनिमेटिंग के रूप में चिन्हित करे खातिर कइल जाला। अगर रउरा data-ride="carousel"अपना हिंडोला के इनिशियलाइज करे खातिर इस्तेमाल ना करीं त ओकरा के खुदे इनिशियलाइज करे के पड़ी. एकर इस्तेमाल एकही हिंडोला के (फालतू आ अनावश्यक) स्पष्ट जावास्क्रिप्ट इनिशियलाइजेशन के संयोजन में ना कइल जा सके ला।

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

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

$('.carousel').carousel()

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-interval=""।

नांव किसिम बाकी बिबरन
अंतराल के अंतराल के बारे में बतावल गइल बा संख्या 5000 के बा कवनो आइटम के स्वचालित रूप से साइकिल चलावे के बीच देरी करे के समय के मात्रा। अगर false, हिंडोला अपने आप चक्र ना होई।
कीबोर्ड के बारे में बतावल गइल बा बूलियन के बा सच कीबोर्ड के घटना प हिंडोला के प्रतिक्रिया देवे के चाही कि ना।
ठहराव तार के बा | बूलियन के बा 'होवर' करे के बा।

अगर पर सेट कइल गइल बा 'hover'त हिंडोला के साइकिल चलावे के mouseenterरोक देला आ पर हिंडोला के साइकिल चलावे के फेर से शुरू कर देला mouseleave. अगर , पर सेट कइल गइल बा false, हिंडोला पर मंडराइत कइला से एकरा के रोकल ना जाई।

टच-सक्षम डिवाइस सभ पर, जब , पर सेट कइल जाला 'hover', साइकिल चलावल touchend(एक बेर यूजर हिंडोला के साथ बातचीत पूरा क लिहला पर) दू गो अंतराल खातिर रुक जाई, एकरे बाद स्वचालित रूप से दोबारा शुरू हो जाई। ध्यान दीं कि ई उपर दिहल माउस व्यवहार के अलावा बा।
सवारी डोरी गलत उपयोगकर्ता के पहिला आइटम के मैन्युअल रूप से चक्र करे के बाद हिंडोला के ऑटोप्ले करेला। अगर पर सेट कइल गइल बा 'carousel', लोड पर हिंडोला के ऑटोप्ले करेला।
लपेटाई बूलियन के बा सच का हिंडोला लगातार साइकिल चलावे के चाहीं भा हार्ड स्टॉप होखे के चाहीं.
छूअऽ बूलियन के बा सच का हिंडोला टचस्क्रीन डिवाइस प लेफ्ट/राइट स्वाइप इंटरैक्शन के सपोर्ट करे के चाही।

विधियन के बारे में बतावल गइल बा

एसिंक्रोनस तरीका आ संक्रमण के बारे में बतावल गइल बा

सभ एपीआई विधि एसिंक्रोनस होला आ एगो संक्रमण शुरू होला . संक्रमण शुरू होते ही उ लोग फोन करे वाला के पास वापस आ जाला लेकिन खतम होखे से पहिले . एकरा अलावा, एगो संक्रमण घटक पर एगो मेथड कॉल के अनदेखी कइल जाई .

अधिक जानकारी खातिर हमनी के जावास्क्रिप्ट दस्तावेज देखल जाव .

.carousel(options)

एक वैकल्पिक विकल्प के साथ हिंडोला के आरंभ करेला objectआ आइटम के माध्यम से साइकिल चलावे शुरू करेला।

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

बाईं ओर से दाएं हिंडोला आइटम के माध्यम से चक्र।

.carousel('pause')

हिंडोला के आइटम के माध्यम से साइकिल चलावे से रोक देला।

.carousel(number)

हिंडोला के एगो खास फ्रेम (0 आधारित, सरणी के समान) में चक्र करे ला। लक्ष्य आइटम देखावे से पहिले (यानी घटना होखे से पहिले) कॉलर के वापस आ जाला।slid.bs.carousel

.carousel('prev')

पिछला आइटम के चक्कर लगावेला। पिछला आइटम देखावे से पहिले (यानी घटना होखे से पहिले) कॉलर के वापस आ जाला।slid.bs.carousel

.carousel('next')

अगिला आइटम पर चक्कर लगावेला। अगिला आइटम देखावे से पहिले (यानी घटना होखे से पहिले) कॉलर के वापस आ जाला।slid.bs.carousel

.carousel('dispose')

कवनो तत्व के हिंडोला के नष्ट कर देला।

.carousel('nextWhenVisible')

जब पन्ना ना लउके भा हिंडोला भा ओकर माता-पिता ना लउके तब हिंडोला के अगिला पर साइकिल मत चलाईं. अगिला आइटम देखावे से पहिले (यानी घटना होखे से पहिले) कॉलर के वापस आ जाला।slid.bs.carousel

.carousel('to')

हिंडोला के एगो खास फ्रेम (0 आधारित, सरणी के समान) में चक्र करे ला। अगिला आइटम देखावे से पहिले (यानी घटना होखे से पहिले) कॉलर के वापस आ जाला।slid.bs.carousel

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप के हिंडोला क्लास हिंडोला के कार्यक्षमता में हुक करे खातिर दुगो घटना के उजागर करेला। दुनों इवेंट में निम्नलिखित अतिरिक्त गुण बाड़ें:

  • direction: हिंडोला जवना दिशा में फिसल रहल बा (या त "left"या "right").
  • relatedTarget: DOM तत्व जवन सक्रिय आइटम के रूप में जगह पर सरकावल जा रहल बा।
  • from: वर्तमान आइटम के अनुक्रमणिका बा
  • to: अगिला आइटम के अनुक्रमणिका

सभ हिंडोला घटना सभ के खुद हिंडोला पर (यानी पर <div class="carousel">) फायर कइल जाला।

घटना के प्रकार बा बिबरन
स्लाइड.बीएस.हिंडोला के बा ई इवेंट तुरंत फायर हो जाला जब slideइंस्टेंस मेथड के आह्वान कइल जाला।
स्लाइड.बीएस.हिंडोला के बा ई इवेंट तब फायर कइल जाला जब हिंडोला आपन स्लाइड ट्रांजिशन पूरा कर लेला। 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

संक्रमण के अवधि बदले के बा

के संक्रमण अवधि के संकलन से पहिले Sass चर .carousel-itemके साथ बदलल जा सके ला या कस्टम शैली सभ के साथ अगर आप संकलित CSS के इस्तेमाल कर रहल बानी। $carousel-transitionअगर कई गो संक्रमण लागू होखे तब सुनिश्चित करीं कि ट्रांसफॉर्म संक्रमण के पहिले परिभाषित कइल गइल बा (उदाहरण खातिर transition: transform 2s ease, opacity .5s ease-out)।