हिंडोला

तत्वक कें माध्यम सं साइकिल चलावय कें लेल एकटा स्लाइड शो घटक-पाठ कें छवि या स्लाइड-जैना एक हिंडोला.

कोना काज करैत अछि

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

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

कृपया ध्यान राखू जे नेस्टेड हिंडोला समर्थित नहि अछि, आओर हिंडोला सामान्यतः सुलभता मानकक अनुरूप नहि अछि.

अंत में, अगर अहां हमर जावास्क्रिप्ट स्रोत सं बना रहल छी, त एकरा लेल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 class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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>

व्यक्तिगत .carousel-itemअंतराल

अगिला आइटम पर स्वचालित रूप सं साइकिल चलावय कें बीच देरी करय कें लेल समय कें मात्रा बदलय कें 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"पृष्ठ लोड स॑ शुरू होय क॑ एक हिंडोला क॑ एनिमेटिंग के रूप म॑ चिह्नित करै लेली प्रयोग करलऽ जाय छै । एकरऽ उपयोग एक ही हिंडोला केरऽ (अनावश्यक आरू अनावश्यक) स्पष्ट जावास्क्रिप्ट आरंभीकरण के साथ संयोजन म॑ नै करलऽ जाब॑ सकै छै ।

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

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

$('.carousel').carousel()

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-interval="".

विधियाँ

.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">) पर फायर कयल जाइत अछि |

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

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

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