हिंडोला
तत्त्वानां माध्यमेन चक्रं कर्तुं स्लाइड् शो घटकः-पाठस्य चित्राणि वा स्लाइड् वा-हिंडोला इव ।
कथं कार्यं करोति
हिंडोला सामग्रीश्रृङ्खलायाम् माध्यमेन सायक्लिंग् कर्तुं स्लाइड् शो अस्ति, 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>
नियन्त्रणैः सह
पूर्वे परे च नियन्त्रणे योजयित्वा । वयं elements इत्यस्य उपयोगं अनुशंसयामः , परन्तु भवान् elements इत्यनेन सह <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>
व्यक्तिगत .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>
<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 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=""
।
नामः | प्रकारः | मूलभूतम् | वर्णनम् |
---|---|---|---|
अन्तरालम् | संख्या | ५००० | स्वयमेव कस्यचित् वस्तुनः सायकलीकरणस्य मध्ये विलम्बस्य समयस्य परिमाणम् । यदि false , हिंडोला स्वयमेव चक्रं न करिष्यति। |
कीबोर्ड | बूलियन इति | सत्यम् | कीबोर्ड-घटनासु हिंडोला प्रतिक्रियां दातव्या वा इति। |
विराम | तार | बूलियन इति | 'मण्डपः' इति । | यदि सेट् भवति तर्हि स्पर्श-सक्षम-यन्त्रेषु, यदा , इति सेट् भवति तदा |
वहते | सूत्र | असत्य | उपयोक्ता प्रथमं द्रव्यं मैन्युअल् रूपेण चक्रं कृत्वा हिंडोला स्वयमेव वादयति । यदि , इति सेट् भवति '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.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
) ।