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