हिंडोला के बा

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

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

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

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

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

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

उदाहरण

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

वैकल्पिक नियंत्रण खातिर पर एगो यूनिक आईडी जरूर सेट करीं .carousel, खासतौर पर अगर रउआँ एकही पन्ना पर कई गो हिंडोला के इस्तेमाल कर रहल बानी।

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

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

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

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

पिछिला अगिला

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

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

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

हिंडोला के स्थिति के आसानी से नियंत्रित करे खातिर डेटा विशेषता के इस्तेमाल करीं। 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…
})