हिंडोला
तत्वों के माध्यम से साइकिल चलाने के लिए एक स्लाइड शो घटक—छवियों या पाठ की स्लाइड—कैरोसेल की तरह।
यह काम किस प्रकार करता है
हिंडोला सामग्री की एक श्रृंखला के माध्यम से साइकिल चलाने के लिए एक स्लाइड शो है, जिसे CSS 3D ट्रांसफ़ॉर्म और थोड़ी जावास्क्रिप्ट के साथ बनाया गया है। यह छवियों, टेक्स्ट या कस्टम मार्कअप की एक श्रृंखला के साथ काम करता है। इसमें पिछले/अगले नियंत्रणों और संकेतकों के लिए समर्थन भी शामिल है।
उन ब्राउज़रों में जहां पृष्ठ दृश्यता API समर्थित है, जब उपयोगकर्ता को वेबपृष्ठ दिखाई नहीं देता है (जैसे कि जब ब्राउज़र टैब निष्क्रिय होता है, ब्राउज़र विंडो छोटा होता है, आदि) तो हिंडोला फिसलने से बच जाएगा।
इस घटक का एनीमेशन प्रभाव prefers-reduced-motion
मीडिया क्वेरी पर निर्भर है। हमारे एक्सेसिबिलिटी डॉक्यूमेंटेशन का रिड्यूस्ड मोशन सेक्शन देखें ।
कृपया ध्यान रखें कि नेस्टेड कैरोसेल समर्थित नहीं हैं, और कैरोसेल आमतौर पर एक्सेसिबिलिटी मानकों के अनुरूप नहीं होते हैं।
अंत में, यदि आप स्रोत से हमारी जावास्क्रिप्ट बना रहे हैं, तो इसके लिएutil.js
.
उदाहरण
हिंडोला स्वचालित रूप से स्लाइड आयामों को सामान्य नहीं करता है। जैसे, सामग्री को उचित आकार देने के लिए आपको अतिरिक्त उपयोगिताओं या कस्टम शैलियों का उपयोग करने की आवश्यकता हो सकती है। जबकि हिंडोला पिछले/अगले नियंत्रणों और संकेतकों का समर्थन करता है, वे स्पष्ट रूप से आवश्यक नहीं हैं। जैसा आप फिट देखते हैं वैसा ही जोड़ें और अनुकूलित करें।
.active
कक्षा को किसी एक स्लाइड में जोड़ने की आवश्यकता है अन्यथा हिंडोला दिखाई नहीं देगा। वैकल्पिक नियंत्रणों के लिए एक अद्वितीय आईडी सेट करना भी सुनिश्चित करें .carousel
, खासकर यदि आप एक ही पृष्ठ पर एकाधिक कैरोसेल का उपयोग कर रहे हैं। नियंत्रण और संकेतक तत्वों में एक data-target
विशेषता (या href
लिंक के लिए) होनी चाहिए जो .carousel
तत्व की आईडी से मेल खाती हो।
केवल स्लाइड
यहाँ केवल स्लाइड वाला हिंडोला है। ब्राउज़र डिफ़ॉल्ट छवि संरेखण को रोकने के लिए .d-block
और हिंडोला छवियों की उपस्थिति पर ध्यान दें ।.w-100
नियंत्रण के साथ
पिछले और अगले नियंत्रणों में जोड़ना:
संकेतकों के साथ
आप नियंत्रणों के साथ-साथ, हिंडोला में संकेतक भी जोड़ सकते हैं।
कैप्शन के साथ
.carousel-caption
किसी भी तत्व के साथ आसानी से अपनी स्लाइड में कैप्शन जोड़ें .carousel-item
। उन्हें छोटे व्यूपोर्ट पर आसानी से छिपाया जा सकता है, जैसा कि नीचे दिखाया गया है, वैकल्पिक प्रदर्शन उपयोगिताओं के साथ । हम उन्हें शुरू में छुपाते हैं .d-none
और उन्हें मध्यम आकार के उपकरणों पर वापस लाते हैं .d-md-block
।
क्रॉसफ़ेड
.carousel-fade
स्लाइड के बजाय फ़ेड ट्रांज़िशन के साथ स्लाइड को एनिमेट करने के लिए अपने हिंडोला में जोड़ें ।
व्यक्तिगत .carousel-item
अंतराल
अगले आइटम पर स्वचालित रूप से साइकिल चलाने के बीच विलंब के समय को बदलने के data-interval=""
लिए a में जोड़ें ।.carousel-item
प्रयोग
डेटा विशेषताओं के माध्यम से
हिंडोला की स्थिति को आसानी से नियंत्रित करने के लिए डेटा विशेषताओं का उपयोग करें। data-slide
खोजशब्दों को स्वीकार करता है prev
या next
, जो स्लाइड की स्थिति को उसकी वर्तमान स्थिति के सापेक्ष बदल देता है। वैकल्पिक रूप से, data-slide-to
कैरोसेल में कच्चे स्लाइड इंडेक्स को पास करने के लिए उपयोग करें data-slide-to="2"
, जो स्लाइड की स्थिति को से शुरू होने वाले किसी विशेष इंडेक्स में स्थानांतरित करता है 0
।
एट्रिब्यूट का data-ride="carousel"
उपयोग कैरोसल को पेज लोड होने पर एनिमेटिंग के रूप में चिह्नित करने के लिए किया जाता है। यदि आप data-ride="carousel"
अपने हिंडोला को प्रारंभ करने के लिए उपयोग नहीं करते हैं, तो आपको इसे स्वयं प्रारंभ करना होगा। इसका उपयोग (अनावश्यक और अनावश्यक) एक ही हिंडोला के स्पष्ट जावास्क्रिप्ट आरंभीकरण के संयोजन में नहीं किया जा सकता है।
जावास्क्रिप्ट के माध्यम से
कैरोसेल को इसके साथ मैन्युअल रूप से कॉल करें:
विकल्प
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-
, जैसा कि में है data-interval=""
।
नाम | टाइप | चूक | विवरण |
---|---|---|---|
मध्यान्तर | संख्या | 5000 | किसी आइटम को स्वचालित रूप से साइकिल चलाने के बीच देरी के लिए समय की मात्रा। अगर गलत है, तो कैरोसेल अपने आप साइकिल नहीं चलेगा. |
कीबोर्ड | बूलियन | सच | कैरोसेल को कीबोर्ड इवेंट पर प्रतिक्रिया देनी चाहिए या नहीं। |
रोकना | स्ट्रिंग | बूलियन | "होवर" | अगर सेट किया जाता है स्पर्श-सक्षम उपकरणों पर, जब पर सेट किया जाता है |
सवारी | डोरी | असत्य | उपयोगकर्ता द्वारा पहले आइटम को मैन्युअल रूप से साइकिल करने के बाद हिंडोला ऑटोप्ले करता है। अगर "हिंडोला", लोड होने पर कैरोसेल अपने आप चलता है. |
लपेटना | बूलियन | सच | क्या कैरोसेल को लगातार साइकिल चलाना चाहिए या हार्ड स्टॉप होना चाहिए। |
स्पर्श | बूलियन | सच | क्या कैरोसल को टचस्क्रीन डिवाइस पर बाएं/दाएं स्वाइप इंटरैक्शन का समर्थन करना चाहिए। |
तरीकों
अतुल्यकालिक तरीके और संक्रमण
सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहले । इसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।
.carousel(options)
वैकल्पिक विकल्पों के साथ कैरोसेल को प्रारंभ करता है object
और आइटम के माध्यम से साइकिल चलाना प्रारंभ करता है।
.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">
) पर फ़ायर किए जाते हैं.
घटना प्रकार | विवरण |
---|---|
स्लाइड.bs.carousel | slide इंस्टेंस विधि लागू होने पर यह घटना तुरंत सक्रिय हो जाती है। |
slid.bs.carousel | यह इवेंट तब सक्रिय होता है जब कैरोसेल ने अपना स्लाइड ट्रांज़िशन पूरा कर लिया हो। |
संक्रमण अवधि बदलें
यदि आप संकलित CSS का उपयोग कर रहे हैं, तो संकलन या कस्टम शैलियों से पहले Sass चर के साथ की संक्रमण अवधि को .carousel-item
बदला जा सकता है । $carousel-transition
यदि एकाधिक संक्रमण लागू होते हैं, तो सुनिश्चित करें कि परिवर्तन संक्रमण पहले परिभाषित किया गया है (उदाहरण के लिए transition: transform 2s ease, opacity .5s ease-out
)।