हिंडोला

तत्त्वानां माध्यमेन चक्रं कर्तुं स्लाइड् शो घटकः-पाठस्य चित्राणि वा स्लाइड् वा-हिंडोला इव ।

कथं कार्यं करोति

हिंडोला सामग्रीश्रृङ्खलायाम् माध्यमेन सायक्लिंग् कर्तुं स्लाइड् शो अस्ति, CSS 3D परिवर्तनैः सह निर्मितम् अस्ति तथा च किञ्चित् जावास्क्रिप्ट् इत्यनेन सह निर्मितम् अस्ति । इदं चित्राणां, पाठस्य, अथवा कस्टम् मार्कअपस्य श्रृङ्खलाया सह कार्यं करोति । अस्मिन् पूर्व/अनन्तरनियन्त्रणानां सूचकानाम् च समर्थनम् अपि अन्तर्भवति ।

ब्राउजर् मध्ये यत्र पृष्ठदृश्यता एपिआइ समर्थितम् अस्ति, तत्र हिंडोला स्खलनं परिहरिष्यति यदा जालपुटं उपयोक्त्रे न दृश्यते (यथा यदा ब्राउजर् ट्याब् निष्क्रियः भवति, ब्राउजर् विण्डो न्यूनतमः भवति इत्यादि)

कृपया अवगच्छन्तु यत् नेस्टेड् हिंडोलाः समर्थिताः न सन्ति, तथा च हिंडोलाः सामान्यतया सुलभतामानकानां अनुरूपाः न भवन्ति ।

अन्तिमे, यदि भवान् अस्माकं जावास्क्रिप्ट् स्रोततः निर्माति तर्हि तस्य आवश्यकताutil.js अस्ति .

उदाहरण

हिंडोलाः स्वयमेव स्लाइड् आयामान् सामान्यं न कुर्वन्ति । तथा च, सामग्रीं समुचितरूपेण आकारयितुं भवद्भिः अतिरिक्त-उपयोगितायाः अथवा अनुकूलित-शैल्याः उपयोगः करणीयः भवेत् । यदा हिंडोलाः पूर्व/अग्रे नियन्त्रणानि सूचकानि च समर्थयन्ति तथापि तेषां स्पष्टतया आवश्यकता नास्ति । यथायोग्यं योजयन्तु अनुकूलितं च कुर्वन्तु।

वर्गं एकस्मिन् स्लाइड् मध्ये .activeयोजयितुं आवश्यकम् अन्यथा हिंडोला न दृश्यते । अपि च वैकल्पिकनियन्त्रणानां कृते एकं अद्वितीयं id अवश्यं सेट् कुर्वन्तु .carousel, विशेषतः यदि भवान् एकस्मिन् पृष्ठे बहुविधहिंडोलाः उपयुज्यते। नियन्त्रणं तथा सूचकतत्त्वेषु एकं data-targetविशेषता (अथवा लिङ्कानां कृते) भवितुमर्हति यत् तत्त्वस्य hrefid इत्यनेन सह मेलनं करोति ।.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 attributes इत्यस्य उपयोगं कुर्वन्तु । data-slideकीवर्ड्स prevअथवा next, को स्वीकार करता है, जो इसकी वर्तमान स्थिति के सापेक्ष स्लाइड स्थिति को परिवर्तित करता है। वैकल्पिकरूपेण, data-slide-toकच्चा स्लाइड अनुक्रमणिका हिंडोला - मध्ये पारयितुं उपयुज्यताम् data-slide-to="2", यत् स्लाइड् स्थानं , इत्यनेन आरभ्यते विशेषसूचकाङ्कं प्रति स्थानान्तरयति 0।

data-ride="carousel"पृष्ठभारात् आरभ्य हिंडोलाम् एनिमेट् इति चिह्नितुं विशेषणस्य उपयोगः भवति । एकस्यैव हिंडोलायाः (अनावश्यकं च अनावश्यकं च) स्पष्टजावास्क्रिप्ट् आरम्भीकरणेन सह संयोजनेन तस्य उपयोगः कर्तुं न शक्यते ।

जावास्क्रिप्ट् मार्गेण

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

$('.carousel').carousel()

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र 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) ।