Source

हिंडोला

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

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

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

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

अस्य घटकस्य एनिमेशन प्रभावः prefers-reduced-motionमीडिया प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

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

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

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

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

$('.carousel').carousel()

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-interval=""।

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
अन्तरालम् संख्या ५००० स्वयमेव कस्यचित् वस्तुनः सायकलीकरणस्य मध्ये विलम्बस्य समयस्य परिमाणम् । यदि मिथ्या अस्ति तर्हि हिंडोला स्वयमेव चक्रं न करिष्यति।
कीबोर्ड बूलियन इति सत्यम्‌ कीबोर्ड-घटनासु हिंडोला प्रतिक्रियां दातव्या वा इति।
विराम तार | बूलियन इति "मण्डप" इति ।

यदि सेट् भवति तर्हि "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.bs.हिंडोला एषा घटना तत्क्षणमेव प्रज्वलति यदा slideदृष्टान्तविधिः आह्वयते ।
slid.bs.हिंडोला इदं घटना तदा प्रज्वलितं भवति यदा हिंडोला स्वस्य स्लाइड् संक्रमणं सम्पन्नं करोति । 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

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

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