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=""आस्तै इक च जोड़ो ।.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कन्नै बदली सकदा ऐ $carousel-transitionजां कस्टम शैलियां जेकर तुस संकलित CSS दा इस्तेमाल करा करदे ओ. जेकर मते सारे संक्रमण लागू कीते जंदे न तां सुनिश्चत करो जे रूपांतरण संक्रमण गी पैह् ले परिभाशत कीता गेआ ऐ (जियां transition: transform 2s ease, opacity .5s ease-out) ।