Source

हिंडोला के बा

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

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

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

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

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

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

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

उदाहरण

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

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

नियंत्रण के साथे बा

पिछला आ अगिला नियंत्रण में जोड़ल जा रहल बा:

<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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

.carousel-fadeस्लाइड के बजाय फीका संक्रमण के साथ स्लाइड के एनिमेट करे खातिर अपना हिंडोला में जोड़ीं ।

<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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 के बा कवनो आइटम के स्वचालित रूप से साइकिल चलावे के बीच देरी करे के समय के मात्रा। अगर झूठ बा त हिंडोला अपने आप साइकिल ना चली।
कीबोर्ड के बारे में बतावल गइल बा बूलियन के बा सच कीबोर्ड के घटना प हिंडोला के प्रतिक्रिया देवे के चाही कि ना।
ठहराव तार के बा | बूलियन के बा "होवर" के बा।

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

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

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

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

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

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

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

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

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

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

  • 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)।